1. 程式人生 > 實用技巧 >百度地圖拖動選點並實時POI檢索附近興趣點

百度地圖拖動選點並實時POI檢索附近興趣點

地圖拖拽選點使用了百度地圖的拖拽以及地址解析

            data{
                  return{
                        goinit:''
                  }
            }

            var lng = sessionStorage.getItem('lng')
            var lat = sessionStorage.getItem('lat')
            //啟用滾輪縮放
            var map= new BMap.Map("container");
            var mPoint= new BMap.Point(lng, lat);
            var that = this
            var myGeo = new BMap.Geocoder();        //建立地址解析例項
            var geolocation = new BMap.Geolocation();
            map.centerAndZoom(mPoint,18);  //初始化時,即可設定中心點和地圖縮放級別。
            
            map.enableScrollWheelZoom(true);      //開啟滾輪縮放
            map.enableDragging()                  //開啟慣性拖拽
            displayPOI(mPoint)
            // 檢索條件【檢索附近全部
            var mOption = {
                poiRadius : 500,            //半徑為1000米內的POI,預設100米
                numPois : 12                //列舉出50個POI,預設10個
            }
            // 初始化
            this.goinit()
            // 返回初始位置操作
            this.goinit = function () {
                map.panTo(mPoint);
                displayPOI(mPoint)
            }
            function displayPOI(point){
                myGeo.getLocation(point,function mCallback(rs){
                        var allPois = rs.surroundingPois;             //獲取全部POI
                        console.log('displayPOI>>=',rs)               //獲取結果
                    },mOption);
            }
            
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() === BMAP_STATUS_SUCCESS){

                    //將地圖中心移動到可視區中點
                    map.panTo(r.point);
                    map.addEventListener('dragend',function(){            //拖拽結束觸發
                        // 建立marker點,可以選擇新增或者刪除【小紅點標記】
                        var mk = new BMap.Marker(map.getCenter());
                        // map.addOverlay(mk);
                        map.removeOverlay(mk);
                        var pos = map.getCenter();            //map.getCenter();獲取當前地圖中心點座標
                        console.log(pos)
                        displayPOI(pos)
                    });
                }else {
                    alert('failed'+this.getStatus());
                }
            });