百度地图获取定位，实现拖动marker定位，返回具体的位置名

最新推荐文章于 2024-05-13 12:03:47 发布

weixin_30376083

最新推荐文章于 2024-05-13 12:03:47 发布

阅读量496

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/luleixia/p/7088919.html

版权

<!DOCTYPE html>
<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:"微软雅黑";}
        .button-full{
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 999;
            height: 50px;
            width: 100%;
            line-height: 50px;
            font-size: 16px;
            text-align: center;
            color: #fff;
            background: #333;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ***Your ak"></script>
    <title>地图展示</title>
</head>
<body>
    <div id="allmap"></div>
    <a id="chosedBtn" class=" button-full">选择这个地址</a>
</body>
</html>

javascirpt

<script type="text/javascript">
    //创建默认初始化Map实例
    (function(){
        
        mapObj = {
            com: {
                map : new BMap.Map("allmap"),
                infoWindow :  new BMap.InfoWindow("正在载入..", {offset : new BMap.Size(20, -60)}),
                icon: new BMap.Icon("__IMG__/locate.png", new BMap.Size(60, 60)),
                iconOffsetSize: new BMap.Size(0, -30),
                chosedAddr: ""
            },
            
            init: function(){
                var _this = this;

                _this.default();

                _this.initLocation().then(function(result){
                    //清除掉默认的markerDefault
                    _this.com.map.clearOverlays()

                    var marker = result.mk;
                    var point = result.pt;

                    //取得当前位置的名字
                    _this.getAddrAccordingPoint(point).then(function(res){
                        _this.changeInfoWindowContent(res)
                        //打开信息窗体
                        _this.com.map.openInfoWindow(_this.com.infoWindow, point);  
                    }); 
                   
                    //绑定拖动结束事件，获取经纬度
                    marker.addEventListener("dragend", function(){
                        var curPoint = marker.getPosition();
                        console.log(curPoint)    
                        //取得拖动后当前位置的名字
                        _this.getAddrAccordingPoint(curPoint).then(function(res){
                            _this.changeInfoWindowContent(res)
                            //打开信息窗体
                            _this.com.map.openInfoWindow(_this.com.infoWindow, curPoint);  
                        }); 
                    });
                    marker.addEventListener("click", function(){  
                        var curPoint = marker.getPosition();
                        _this.getAddrAccordingPoint(curPoint).then(function(res){
                            _this.changeInfoWindowContent(res)
                            //打开信息窗体
                            _this.com.map.openInfoWindow(_this.com.infoWindow, curPoint);  
                        })
                    }); 
                })
            },

            //默认打开地图的初始状态设置
            default: function(){
                var _this = this; 
                var point = new BMap.Point(114.062048, 22.54579);
                // 设置初始化地图,设置中心点坐标和地图级别
                _this.com.map.centerAndZoom(point, 12);  

                //设置初次打开时，markerDefault，定位初始完毕会被销毁
                var markerDefault = new BMap.Marker(point);
                _this.com.map.addOverlay(markerDefault);
                markerDefault.setIcon(_this.com.icon);

                //设置信息窗体宽度
                _this.com.infoWindow.setWidth(220);
            },

            //獲取定位初始化地圖
            initLocation: function (){
                var _this = this;
                return new Promise(function(resolve, reject){
                    new BMap.Geolocation().getCurrentPosition(function(r){
                        var lat = r.latitude;
                        var long = r.longitude;
                        var point = new BMap.Point(long, lat)

                        var marker = new BMap.Marker(point);
                        marker.setOffset(_this.com.iconOffsetSize)
                        marker.setIcon(_this.com.icon);
                        marker.setAnimation(BMAP_ANIMATION_BOUNCE); 
                        var initObj = {
                            pt: point,
                            mk: marker
                        } 

                        // 将标注添加到地图中
                        _this.com.map.addOverlay(marker); 
                        

                        //允许拖动            
                        marker.enableDragging();
                        //不允许被clearOverlays方法清除
                        marker.disableMassClear();

                        //地图指向当前的点（平移动画）
                        _this.com.map.panTo(point);
                        // 初始化地图,设置中心点坐标和地图级别
                        _this.com.map.centerAndZoom(point, 16);  

                        resolve(initObj);
                    })
                })
            },

            //根据经纬度解析出位置的名称
            getAddrAccordingPoint: function(point){
                var _this = this;
                return new Promise(function(resolve, reject){
                    new BMap.Geocoder().getLocation(point, function(result){      
                        if (result){      
                            if(!!result.surroundingPois[0]){
                                _this.com.chosedAddr = result.address + " " +result.surroundingPois[0].title;  
                            }else{
                                _this.com.chosedAddr = result.address;  
                            }
                            resolve(_this.com.chosedAddr)
                        }      
                    });
                })
            },

            //添加标注地址信息
            changeInfoWindowContent: function(content){
                var _this = this;
                _this.com.infoWindow.setContent(content);
            }
        }; 

        //开始地图
        mapObj.init();

        document.getElementById('chosedBtn').addEventListener('click', function(){
            location.href = '<{:U("Channel/addChannelFollowLog")}>?address='+mapObj.com.chosedAddr
        },false)    
        
    })()
</script>

转载于:https://www.cnblogs.com/luleixia/p/7088919.html

weixin_30376083

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度地图获取定位，实现拖动marker定位，返回具体的位置名

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scal...
复制链接

扫一扫