VUE使用百度地圖插件

• • 實(shí)現(xiàn)功能
  • 百度地圖的使用
  • 相關(guān)代碼片段

實(shí)現(xiàn)功能

需求: 使用百度地圖插件, 實(shí)現(xiàn)手動定位, 獲取經(jīng)緯度地址; 設(shè)置經(jīng)緯度定位; 地址搜索

百度地圖的使用

參考
Vue Baidu Map手冊
百度地圖API

相關(guān)代碼片段

//html 地圖彈框顯示 <el-dialog title="地圖" :visible.sync="dialogBaiduMap" width="60%"><div id="map-wrap" class="map-maker-wrapper"><baidu-map ak="3isqLYGym4Pz60BiOY4NZyLXVdxAMx6H"class="map-wrap":center="mapCenter":zoom="mapZoom"@click="getLocation":scroll-wheel-zoom="true"@ready="mapHandler"><bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation><!-- <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list> --><bm-geolocationanchor="BMAP_ANCHOR_BOTTOM_RIGHT":showAddressBar="true":autoLocation="true"></bm-geolocation></baidu-map><div class="search-wrap"><div class="search_box"><input class="search-input" type="text" v-model="keyword" @input="autoSearch"/><el-button class="search-button" size="small" type="info" plain icon="el-icon-search" @click="handleSearch"></el-button></div><!-- 檢索結(jié)果 --><div v-show="showResultFlag" class="search-result"><div v-for="(item, index) in searchResult" class="item" :key="index" @click="handleSelect(item)"><p class="title">{{ item.title }}</p><!-- <p class="address">{{ item.address }}</p> --></div></div></div></div><div class="info"><span>詳細(xì)地址</span><el-input v-model="businessDetail.address"></el-input><div v-if="!isChangeBusinessDetail"><span>經(jīng)度: </span> {{businessDetail.longitude}},<span>緯度: </span> {{businessDetail.latitude}}<i class="el-icon-edit" @click="changeBusinessDetail" style="color:#1890ff;font-size:16px;margin-left:20px;"></i></div><div v-if="isChangeBusinessDetail">經(jīng)度: <el-input v-model="businessDetail.longitude" class="input_box"></el-input>緯度: <el-input v-model="businessDetail.latitude" class="input_box"></el-input><el-button size="small" type="info" @click="cancelBusinessDetail">取消</el-button><el-button size="small" type="primary" @click="sureBusinessDetail">保存</el-button></div></div><div slot="footer" class="dialog-footer"><el-button size="small" type="primary" @click="dialogBaiduMap = false">確 定</el-button></div></el-dialog> //局部引用百度地圖 import BaiduMap from 'vue-baidu-map/components/map/Map.vue' import { BmLocalSearch, BmNavigation, BmGeolocation, BmCityList } from 'vue-baidu-map'components:{BaiduMap,BmLocalSearch, //地區(qū)檢索BmNavigation, //縮放BmGeolocation, //定位BmCityList //城市列表}, mapHandler({BMap, map}){this.BMap = BMapthis.map = mapmap.clearOverlays() //清除地圖上所有覆蓋物let lng = this.businessDetail.longitudelet lat = this.businessDetail.latitudemap.addOverlay(new BMap.Marker({ lng, lat })) },//在地圖上選擇區(qū)域 click事件 getLocation(e) {//設(shè)置經(jīng)度this.businessDetail.longitude = e.point.lng//設(shè)置緯度this.businessDetail.latitude = e.point.lat//百度地圖類let BMapGL = this.BMap//地圖對象let map = this.map//清除地圖上所有的覆蓋物(保證每次點(diǎn)擊只有一個標(biāo)記)map.clearOverlays()//創(chuàng)建定位標(biāo)記let marker = new BMapGL.Marker(new BMapGL.Point(e.point.lng, e.point.lat))//將標(biāo)記添加到地圖上map.addOverlay(marker)//創(chuàng)建坐標(biāo)解析對象let geoc = new BMapGL.Geocoder()//解析當(dāng)前的坐標(biāo)成地址geoc.getLocation(e.point, (rs) => {//獲取地址對象let addressComp = rs.addressComponents//拼接出詳細(xì)地址this.businessDetail.address =addressComp.province +addressComp.city +addressComp.district +addressComp.street +addressComp.streetNumber})},//通過經(jīng)緯度定點(diǎn), 然后創(chuàng)建坐標(biāo)解析對象解析當(dāng)前的坐標(biāo)成地址 setLocation() {let BMapGL = this.BMaplet map = this.mapmap.clearOverlays()let point = new BMapGL.Point(this.businessDetail.longitude,this.businessDetail.latitude)let marker = new BMapGL.Marker(point)map.addOverlay(marker)let geoc = new BMapGL.Geocoder()geoc.getLocation(point, (rs) => {let addressComp = rs.addressComponentsthis.businessDetail.address =addressComp.province +addressComp.city +addressComp.district +addressComp.street +addressComp.streetNumber}) },//手動搜索地址, 出現(xiàn)一串下拉地址 handleSearch() {let self = thisself.showResultFlag = trueself.selectInfo = Object.assign({}, defaultInfo)let local = new this.BMap.LocalSearch(this.map, {renderOptions: {map: this.map,selectFirstResult: false},onSearchComplete: function (res) {if (res && res.Kr) {self.searchResult = [...res.Kr]}}})local.search(this.keyword) },//選中一個地址, 在地圖上顯示 handleSelect(item) {let self = thislet title = item.titlelet { lng, lat } = item.marker.pointlet point = new this.BMap.Point(lng, lat)let geoc = new this.BMap.Geocoder()geoc.getLocation(point, function (res) {let addString =res.addressComponents.province + res.addressComponents.city + res.addressComponents.district + titleself.showResultFlag = falseself.keyword = addStringself.map.clearOverlays() //清除地圖上所有覆蓋物self.map.addOverlay(new self.BMap.Marker({ lng, lat }))self.mapCenter.lng = lngself.mapCenter.lat = latself.mapZoom = 15}) },

總結(jié)

以上是生活随笔為你收集整理的VUE使用百度地图插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。