JavaScript--百度地图定位，可拖拽

Posted hs610

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript--百度地图定位，可拖拽相关的知识，希望对你有一定的参考价值。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=c4gzpT5Nq6kzMLxK9xYLduaILi4jlt1Q"></script>
    <title>JavaScript百度地图接口定位</title>
    <style>
        .BMap_cpyCtrl {
            display: none;
        }
        .anchorBL {
            display: none;
        }
    </style>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">

    //定位成功事件
    var myKeys=‘‘;      // 当前定位为位置
    var myKeys2=‘‘;     // 拖动后的位置
    var lng=‘‘;         // 经度
    var lat=‘‘;         // 纬度
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,17);

    //添加上缩放的平移控件，缩略图控件以及设置显示的位置-->
    map.addControl(new BMap.NavigationControl());
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        console.log(r.point);
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);//标出所在地
            map.panTo(r.point);//地图中心移动
            lng=r.point.lng;
            lat=r.point.lat;
            var point = new BMap.Point(r.point.lng,r.point.lat); //用所定位的经纬度查找所在地省市街道等信息
            var gc = new BMap.Geocoder();
            var gc2 = new BMap.Geocoder();
            gc.getLocation(point, function(rs){
                var addComp = rs.addressComponents;
                console.log(rs.address);//地址信息
                myKeys = rs.address;
                alert(myKeys);         //弹出所在地址
            });
                var marker = new BMap.Marker(point); //创建标注
                map.addOverlay(marker);              //将标注添加到地图中
                marker.enableDragging();             //设置标注可拖拽(默认为不可拖拽)
                marker.addEventListener(‘dragend‘, function(e){
                    var point2 = new BMap.Point(e.point.lng,e.point.lat); //用所定位的经纬度查找所在地省市街道等信息
                    // alert(‘当前坐标：‘ + e.point.lng + ", " + e.point.lat);
                    gc.getLocation(point2, function(rs2){
                        var addComp = rs2.addressComponents;
                        console.log(rs2.address);//地址信息
                        myKeys2 = rs2.address;
                        alert(myKeys2);  //弹出所在地址
                    });
                });


        }else {
            alert(‘failed‘+this.getStatus());
        }
    },{enableHighAccuracy: true});
</script>
</body>
</html>

　　

　　

以上是关于JavaScript--百度地图定位，可拖拽的主要内容，如果未能解决你的问题，请参考以下文章

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

百度地图，自动获取定位，拖拽获取地点，模糊查询获取当前位置

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

使用echarts实现一个可拖拽缩放的立体地图

百度地图javascript api支持手势缩放拖拽吗

js+css+html点击登录后弹出可拖拽的模态框