摘要：
v=2.0&ak=你的秘钥"˃然后直接在页面直接初始化地图即可，注意地图一定要设置宽和高。现在我被同事硬性拧过来使用vuebaidumap。中文文档地址https://dafrok.github.io/vue-baidu-map/#/zh/index。此插件将需要使用的控件、覆盖物都封装成组件。要使用的话需要先引入并申明。
在12月份之前在vue项目中使用百度地图我都是在index.html直接应用如下代码
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
然后直接在页面直接初始化地图即可，注意地图一定要设置宽和高。
现在我被同事硬性拧过来使用vue baidu map。中文文档地址https://dafrok.github.io/vue-baidu-map/#/zh/index。
此插件将需要使用的控件、覆盖物都封装成组件。要使用的话需要先引入并申明。如下
import { BaiduMap, BmLabel, BmGeolocation, BmOverlay, BmInfoWindow } from 'vue-baidu-map'给一个使用较完整的例子
<baidu-map @moveend="moveendMap" @ready="readyMap" class="bm-view" v-bind:style="{ '100%', height: winHeight + 'px' }" :center="center" ak="tRcad54fc5HjGw1mZ64lttoT" :zoom="zoom"> <bm-info-window :position="windowLabelPoint" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen" > <a class="header-label" :href="shopBaseinfo.url"> <div class="shopname" v-text="shopBaseinfo.serviceProviderName"></div> <span>详情»</span> </a> <div class="base-info" > <span v-text="'案例个数: '+shopBaseinfo.caseNum+'个'"></span> <span v-text="'案例个数: '+shopBaseinfo.shopDesignerNum+'个'"></span> </div> </bm-info-window> <bm-label v-for="(item,index) in decShopPointerList"@click="getShopInfo(item.id,index,item.longitude,item.latitude)":key="item.id":content="item.serviceProviderName":position="{lng: item.longitude, lat: item.latitude}":labelStyle="curIndex==index?labelCurStyles:labelStyles":title="item.serviceProviderName"/> </baidu-map>
import { BaiduMap, BmLabel, BmGeolocation, BmOverlay, BmInfoWindow } from 'vue-baidu-map'export default{
data: () =>({
center: {lng: 114.3162001, lat: 30.58108413},
zoom: 14,
winHeight: 400,
param: {
lonMin: 0,
lonMax: 0,
latMin: 0,
latMax: 0},
infoWindow: {
show: true,
contents: ''},
decShopPointerList: [],
windowLabelPoint: {
lng: 0,
lat: 0},
eventListen: false, //地图初始完成之后才可监听移动、放大等事件
map: {},
shopBaseinfo: {},
curIndex: -1,
labelShow: true,
labelStyles: {color: '#fff',
fontSize: '12px',
background: '#f56666',
padding: '6px',
border: 'none',
borderRadius: '4px'},
labelCurStyles: {color: '#fff',
fontSize: '12px',
background: '#1894ea',
padding: '6px',
border: 'none',
borderRadius: '4px'}
}),
mounted () {
if(window.innerHeight) {
this.winHeight =window.innerHeight
} else if ((document.body) &&(document.body.clientHeight)) {
this.winHeight =document.body.clientHeight
}
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) =>{
this.center ={lng: position.coords.longitude, lat: position.coords.latitude}
})
}
this.zoom = 14},
methods: {
moveendMap() {
if (this.eventListen) {
this.getConernPoint()
}
},
infoWindowClose (e) {
this.curIndex = -1
this.infoWindow.show = false},
infoWindowOpen (e) {
this.infoWindow.show = true},
readyMap({BMap, map}) {
this.BMap =BMap
this.map =map
this.Geo = newBMap.Geocoder()
this.getConernPoint()
this.eventListen = true},
//获取边角经纬度并请求商铺数据
getConernPoint() {
let minPoint = this.map.getBounds().getSouthWest()
let maxPoint = this.map.getBounds().getNorthEast()
this.param.lonMin =minPoint.lng
this.param.latMin =minPoint.lat
this.param.lonMax =maxPoint.lng
this.param.latMax =maxPoint.lat
this.getShopsList()
},
getShopsList() {
//Indicator.open('正在加载')
getshoplist(this.param)
.then((res) =>{
//console.log(res)
if(res.decShopPointerList) {
this.decShopPointerList =res.decShopPointerList
}
//Indicator.close()
})
},
getShopInfo(id, index, lng, lat) {
this.curIndex =index
getshopDetail({shopId: id})
.then((res) =>{
this.shopBaseinfo =res.decShopInfo
this.shopBaseinfo.url =res.decShopDetailsURL
this.shopBaseinfo.shopDesignerNum =res.decShopDesignerNum
if (this.shopBaseinfo.caseNum > 0) {
this.shopBaseinfo.caseNum = this.shopBaseinfo.caseNum
} else{
this.shopBaseinfo.caseNum = 0}
if (this.shopBaseinfo.shopDesignerNum > 0) {
this.shopBaseinfo.shopDesignerNum = this.shopBaseinfo.shopDesignerNum
} else{
this.shopBaseinfo.shopDesignerNum = 0}
this.windowLabelPoint.lng =lng
this.windowLabelPoint.lat =lat
this.infoWindow.show = true})
}
},
components: {
BaiduMap,
BmLabel,
BmInfoWindow
}
}在vue baidu map中依然遵守数据改变视图更新
使用vue baidu map时我想将地址解析出来并在地图上描点，在vue baidu map的官方文档上没看到。可以在百度地图官方文档中找，可使用Geocoder()构造函数，创建一个地址解析器的实例。用法如下：
var myGeo = newBMap.Geocoder(); //将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint("北京市海淀区上地10街", function(point){ if(point) { map.centerAndZoom(point, 16); map.addOverlay(newBMap.Marker(point)); }else{ alert("您选择地址没有解析到结果!"); } }, "北京市");
获取当前位置经纬度
let geolocation = newBMap.Geolocation(); geolocation.getCurrentPosition(function(r) { if (this.getStatus() ==BMAP_STATUS_SUCCESS) { let point = r.point.lng + ',' +r.point.lat; }else{ console.log('failed' + this.getStatus()); } }, { enableHighAccuracy: true })