在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 })