百度地图的定位以及拖拽(显示坐标位置)

Posted ricklz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了百度地图的定位以及拖拽(显示坐标位置)相关的知识,希望对你有一定的参考价值。

技术分享图片截图示例

技术分享图片技术分享图片

<!doctype html>

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title></title>


    <style type="text/css">
        html{height:100%}    
        body{height:100%;margin:0px;padding:0px}    
        #map_canvas{
            margin:0 auto;
            border:2px solid #f9f7f6;
            width:80%;
            height:80%;
            }    


        
    </style>
  
 </head>
 <body>
    


    <div id="map_canvas"></div>


    <script src="jquery-2.1.4.min.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=74af171e2b27ee021ed33e549a9d3fb9"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>


    <script type="text/javascript">
        var map = new BMap.Map("map_canvas");          // 创建地图实例
        var initLat = 39.916527;
        var initLng = 116.397128;
        var point = new BMap.Point(initLng, initLat);  // 创建点坐标  
        map.centerAndZoom(point, 13);                 // 初始化地图,设置中心点坐标和地图级别  




   
        //var marker = new BMap.Marker(point);        // 创建标注    
        //map.addOverlay(marker);                     // 将标注添加到地图中


        map.enableScrollWheelZoom();                            // 启用滚轮放大缩小 
        map.addControl(new BMap.NavigationControl());           // 启用放大缩小 尺
        
        //获取当前位置
        var geolocation = new BMap.Geolocation();  
        geolocation.getCurrentPosition(function(r){  
            if(this.getStatus() == BMAP_STATUS_SUCCESS){  
                mk = new BMap.Marker(r.point);  
                mk.addEventListener("dragend", showInfo);
                mk.enableDragging();    //可拖拽
                
                getAddress(r.point);


                map.addOverlay(mk);//把点添加到地图上  
                map.panTo(r.point); 


            }else {  
                alert(‘failed‘+this.getStatus());  
            }  
        });
        
        //绑定Marker的拖拽事件
        function showInfo(e){
            var gc = new BMap.Geocoder();
            gc.getLocation(e.point, function(rs){
                var addComp = rs.addressComponents;
                var address = addComp.province +  addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
                alert(address); 
                //画图 ---》显示地址信息
                var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
                map.removeOverlay(mk.getLabel());//删除之前的label 


                mk.setLabel(label);
                //alert(e.point.lng + ", " + e.point.lat + ", "+address);
             });
        }
        
        //获取地址信息,设置地址label
        function getAddress(point){
            var gc = new BMap.Geocoder();
            
            gc.getLocation(point, function(rs){
                var addComp = rs.addressComponents;
                var address =  addComp.province +  addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
                   alert(address); 
                //画图 ---》显示地址信息
                var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
                map.removeOverlay(mk.getLabel());//删除之前的label 


                mk.setLabel(label);
                
             });
             
        }
        
        
        
    </script>


 </body>
</html>























































































































以上是关于百度地图的定位以及拖拽(显示坐标位置)的主要内容,如果未能解决你的问题,请参考以下文章

百度地图API的使用教程以及案例

vue中实现百度地图拖拽地图定位功能

求助 根据经纬度在百度地图上显示出来该位置

手机《腾讯地图》如何定位自己当前位置的方法介绍

如何查询经纬度坐标

怎么用经纬度查找自己在地图中的位置?