百度地图搜索、标注地图示例

由于要做一个搜索标注地图的功能，选择了百度地图的一个示例：
<!doctype html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=uft-8"><title>采集坐标 </title><!--[if IE 6]><script type="text/javascript" src="http://dev.baidu.com/wiki/static/map/tuan/js/DD_belatedPNG_0.0.8a-min.js"></script><script>DD_belatedPNG.fix("#float_search_bar");</script><![endif]--><style>#preview{border: 1px solid #bfd2e1;width: 490px;height: 368px;font-family: Arial, Helvetica, sans-serif,"宋体";}#map_container{height: 368px;}#float_search_bar{z-index: 2012;position: absolute;width: 480px;height: 31px;background: url("http://dev.baidu.com/wiki/static/map/tuan/images/search_bar.png") repeat-x;background-position: 0 -21px;padding: 3px 0 0 10px;}#float_search_bar label, #float_search_bar span{color: #0787cb;font-size: 14px;}#float_search_bar input{width: 180px;height: 16px;margin-top: 1px;}#float_search_bar input:focus{outline: none;}#float_search_bar button{border: 0;color: white;width: 77px;height: 20px;background: url("http://dev.baidu.com/wiki/static/map/tuan/images/search_bar.png") no-repeat;background-position: 0 0;margin-right: 5px;cursor: pointer;}</style></head><body><div id="preview"><div id="float_search_bar"><label>区域：</label><input type="text" id="keyword" /><button id="search_button">查找</button><span>点击地图或标注获取坐标</span></div><div id="map_container"></div></div><div id="result" style="margin-top: 4px;"></div><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script><script type="text/javascript">function getUrlParas(){var hash = location.hash,para = {},tParas = hash.substr(1).split("&");for(var p in tParas){if(tParas.hasOwnProperty(p)){var obj = tParas[p].split("=");para[obj[0]] = obj[1];}}return para;}var para = getUrlParas(),center = para.address?decodeURIComponent(para.address) : "百度大厦",city = para.city?decodeURIComponent(para.city) : "北京市";document.getElementById("keyword").value = center;var marker_trick = false;var map = new BMap.Map("map_container");map.enableScrollWheelZoom();var marker = new BMap.Marker(new BMap.Point(116.404, 39.915), {enableMassClear: false,raiseOnDrag: true});marker.enableDragging();map.addOverlay(marker);map.addEventListener("click", function(e){if(!(e.overlay)){map.clearOverlays();marker.show();marker.setPosition(e.point);setResult(e.point.lng, e.point.lat);}});marker.addEventListener("dragend", function(e){setResult(e.point.lng, e.point.lat);});var local = new BMap.LocalSearch(map, {renderOptions:{map: map},pageCapacity: 1});local.setSearchCompleteCallback(function(results){if(local.getStatus() !== BMAP_STATUS_SUCCESS){alert("无结果");} else {marker.hide();}});local.setMarkersSetCallback(function(pois){for(var i=pois.length; i--; ){var marker = pois[i].marker;marker.addEventListener("click", function(e){marker_trick = true;var pos = this.getPosition();setResult(pos.lng, pos.lat);});}});window.onload = function(){local.search(center);document.getElementById("search_button").onclick = function(){local.search(document.getElementById("keyword").value);};document.getElementById("keyword").onkeyup = function(e){var me = this;e = e || window.event;var keycode = e.keyCode;if(keycode === 13){local.search(document.getElementById("keyword").value);}};};function a(){document.getElementById("float_search_bar").style.display = "none";}/** setResult : 定义得到标注经纬度后的操作* 请修改此函数以满足您的需求* lng: 标注的经度* lat: 标注的纬度*/function setResult(lng, lat){document.getElementById("result").innerHTML = lng + ", " + lat;}</script></body>
</html>

这个示例在百度的网站上，运行是正常的。但是弄到自己的环境中就出了点问题：每次打开后坐标没有显示，而且搜索完毕后也没有坐标显示。
百度地图上都可以正常显示，检查了一下代码，和百度的例子一样，没有什么出入！这点有点让人费解。经过一番思考，认为百度示例给的代码
是一个残缺的例子。于是自己尝试了修改：
   在标注回调函数setMarkersSetCallback中监听事件addEventListener外面添加两行代码
          var pos = marker.getPosition();
                setResult(pos.lng, pos.lat);
最后发现问题解决了。另外，center和city都可以修改。但要注意的是，center如果没有在百度上有过记录，初始化的时候会显示没有结果。因此初始化时
需要设置一个在百度有记录的地点。如一些标志性地点，大学等。。。
    当该实例存在于一个ajax页面中时， window.onload = function(){}句不会加载，需要修改成 $(function(){}样式。
   当该实例存在于一个form表单时，回车键会直接提交表单，而不是查询，因此需要删除以下句子：
document.getElementById("keyword").onkeyup = function(e){
            var me = this;
            e = e || window.event;
            var keycode = e.keyCode;
            if(keycode === 13){
                local.search(document.getElementById("keyword").value);
            }
        };
当按钮为<button id="search_button">查找</button>时，点击直接提交表单。。。
需要修改为： <input type="button" id="search_button" value="查找" /> 点击，查询正常。。。。
如果是要读取上一次记录的地点，使用

local.search(center);

会显得有些不足，因为有的地点初始化读取时，搜索不到，改成坐标比较合适，如下：
map.centerAndZoom(new BMap.Point(130.158514, 130.291279), 18);
               map.setCurrentCity("杭州");
               document.getElementById("address").value = "财贸大学";
               marker = new BMap.Marker(new BMap.Point(130.158503, 130.29129), {
                    enableMassClear: false,
                    raiseOnDrag: true
               });
               setResult(130.158514, 130.291279);

百度地图搜索、标注地图示例相关推荐

微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
Mission planner加载天地图（混合卫星地图含标注）
国内某些地方,高德卫星地图更新的时间比较慢,例如郊区(城区还是很新的,跟google地图一样),天地图,卫星地图整体更新很慢,但是**郊区会同步更新.两个地图各有千秋(虽然最好的还是谷歌地图,基本上都 ...
怎样在百度地图上标注上自己公司的名称使别人能在搜索百度地图的同时在地图上能看见本公司地址？
怎样在百度地图上标注上自己公司的名称使别人能在搜索百度地图的同时在地图上能看见本公司地址? 百度地图分享到: 专业回答飞花SEO 团队光娟娟 2015-04-25 13:00 1.注册 ...
微信JS-SDK之地理位置的获取与在线导航，集成百度地图实现在线地图搜索
原创声明:本文来源于本人另一博客[微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索]原创作品,绝非他处摘取,转载请联系博主本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能 ...
微信公众号开发《三》微信JS-SDK之地理位置的获取，集成百度地图实现在线地图搜索
本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...
Android百度地图 - 在地图上标注已知GPS纬度经度值的一个或一组覆盖物 - OPEN 开发经验库 - 360安全浏览器 8.1...
Android百度地图 - 在地图上标注已知GPS纬度经度值的一个或一组覆盖物 - OPEN 开发经验库 - 360安全浏览器 8.1 首页代码文档问答资讯经验 Gi ...
百度API地图的标注不居中显示，而显示在左上角
前言:今天弄个百度地图,弄了半天就是不居中,之前使用一直没有遇到这个问题.所以就一直在找原因. 百度地图对地图所在的div做了显示隐藏之类操作,标注就不再居中显示,而显示在左上角. 查了很久,有人提出 ...
基于JDBC从数据库中读取数据，在百度地图批量标注地点
基于JDBC从数据库中读取数据,在百度地图批量标注地点一.相关技术 JSP,JDBC,JSON,JS,百度地图API 二.基于JDBC从数据库读取数据见"JSP基于JDBC操作MSSQL ...
使用百度地图API实现地图生成、标记以及标注
首先你需要引入一段javaScript <script type="text/javascript" src="http://api.map.baidu.com/a ...

百度地图搜索、标注地图示例

百度地图搜索、标注地图示例相关推荐

最新文章

热门文章