vue中百度地图定位及附近搜索功能使用步骤_vue.js_

 mounted () { // 创建地图实例 const map = new window.BMapGL.Map('container-map') // 创建浏览器定位实例 var geolocation = new window.BMapGL.Geolocation(); let that = this geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ // 创建点标记 var mk = new BMapGL.Marker(r.point); // 在地图上添加点标记 map.addOverlay(mk); // 将地图平移至中心点 map.panTo(r.point); // console.log('您的位置：' + r.point.lng + ',' + r.point.lat); const point = new window.BMapGL.Point(r.point.lng, r.point.lat) that.lng = r.point.lng that.lat = r.point.lat console.log(r.point.lng, r.point.lat); map.centerAndZoom(point, 30) // 逆向编码 var myGeo = new BMapGL.Geocoder(); myGeo.getLocation(new BMapGL.Point(r.point.lng,r.point.lat), function(result){ if (result){ console.log(result.address); // 获取到当前定位的结果, 调用搜索建议 that.getLocation(result.address) } }); }else{ alert('failed' + this.getStatus()); } }); // const point = new window.BMapGL.Point(116.404, 39.915) // map.centerAndZoom(point, 30) }, methods:{ // 搜索建议 getLocation(address){ var map = new BMapGL.Map("container-map"); var mPoint = new BMapGL.Point(this.lng, this.lat); map.enableScrollWheelZoom(); map.centerAndZoom(mPoint,15); // 绘制圆形范围覆盖物 var circle = new BMapGL.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3}); map.addOverlay(circle); var local = new BMapGL.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}}); // 定义搜索地址,以及范围距离 local.searchNearby(address,mPoint,1000); console.log(local); this.addressList = local._arrPois }, // 点击选择地址 lng 经度 lat 维度 chooseMap(addressItem){ this.addressDetail=addressItem.address // 经度 const lng = addressItem.marker.latLng.lng // 维度 const lat = addressItem.marker.latLng.lat this.$router.replace(`/signIn?address=${this.addressDetail}&planId=${this.$route.query.planId}&lng=${lng}&lat=${lat}`) // that.$emit('getAddress', this.addressDetail) } }