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

最新推荐文章于 2021-10-21 14:11:29 发布

原创最新推荐文章于 2021-10-21 14:11:29 发布 · 8.8k 阅读

1 ·

CC 4.0 BY-SA版权

为了忘却专栏收录该内容

125 篇文章

订阅专栏

在将百度地图的搜索标注地图示例引入个人环境时遇到坐标未显示的问题。通过分析和修改代码，发现示例代码存在缺失，通过在标注回调函数中添加定位和设置坐标的方法解决了问题。此外，还分享了关于初始化位置选择、ajax页面加载、表单提交和读取历史记录的处理建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于要做一个搜索标注地图的功能，选择了百度地图的一个示例：
<!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);