百度地圖獲取定位，實現拖動marker定位，返回具體的位置名

時間 2019-11-18

原文原文鏈接

<!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>

javascirptjavascript

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。