VUE使用百度地图插件
实现功能百度地图的使用相关代码片段实现功能
需求: 使用百度地图插件, 实现手动定位, 获取经纬度地址; 设置经纬度定位; 地址搜索
百度地图的使用
参考
Vue Baidu Map手册
百度地图API
相关代码片段
//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><!-- 检索结果 --><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>详细地址</span><el-input v-model="businessDetail.address"></el-input><div v-if="!isChangeBusinessDetail"><span>经度: </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">经度: <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, //地区检索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 }))},//在地图上选择区域 click事件getLocation(e) {//设置经度this.businessDetail.longitude = e.point.lng//设置纬度this.businessDetail.latitude = e.point.lat//百度地图类let BMapGL = this.BMap//地图对象let map = this.map//清除地图上所有的覆盖物(保证每次点击只有一个标记)map.clearOverlays()//创建定位标记let marker = new BMapGL.Marker(new BMapGL.Point(e.point.lng, e.point.lat))//将标记添加到地图上map.addOverlay(marker)//创建坐标解析对象let geoc = new BMapGL.Geocoder()//解析当前的坐标成地址geoc.getLocation(e.point, (rs) => {//获取地址对象let addressComp = rs.addressComponents//拼接出详细地址this.businessDetail.address =addressComp.province +addressComp.city +addressComp.district +addressComp.street +addressComp.streetNumber})},//通过经纬度定点, 然后创建坐标解析对象解析当前的坐标成地址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})},//手动搜索地址, 出现一串下拉地址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})},
如果觉得《VUE使用百度地图插件》对你有帮助，请点赞、收藏，并留下你的观点哦！
