vue2.x使用百度地图
在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: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}" :label :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 = new BMap.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 = new BMap.Geocoder(); // 将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint("北京市海淀区上地10街", function(point){ if (point) { map.centerAndZoom(point, 16); map.addOverlay(new BMap.Marker(point)); }else{ alert("您选择地址没有解析到结果!"); } }, "北京市");
获取当前位置经纬度
let geolocation = new BMap.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 })