项目使用到的地方
项目中用到的地方不多,主要用来在登记设备时添加一个定位信息(定位),以及在页面展示地图,并把设备排列在地图上(标点),有不同图标区分(icon图标)
遇到的问题
第一就是vue-baidu-map和百度地图官网给出的开发文档完全不一样,使用上也完全不一样,虽然vue有一个vue-baidu-map的开发文档 但是所提供的功能并不完善,需要摸索写出来
官网 vue-baidu-map.
第二就是每个marker的弹窗问题(多个点弹窗只显示一个)
第三是定位问题
第四是图标问题
每个marker的弹窗问题
首先这个标点它在vue里是使用一个标点标签来初始化一个点的,所以第一想法是使用v-for来遍历出多个点,在点里添加一个点击窗口,使用这个点的定位来设置弹出位置
这里说下我遇到的细节问题:
我在弹窗的show属性中使用的是同一个变量
,
后来发现点击标点后能显示隐藏窗口,但所有标点点击都显示同一个窗口而且位置也在同一个地方,
我猜测当所有标点的flag都为true时,应该是第一个点才有效,
所以我在每个marker对象里都加了一个showflag变量
,
代码最后是这样
<div v-for="(marker, i) of markers" :key="i">
<bm-marker
:position="{lng: marker.lng, lat: marker.lat}"
@click="handleMarkerClick(marker)" >
<bm-info-window
:title="marker.merchantName"
:position="{lng: marker.lng, lat: marker.lat}"
:show="marker.showFlag "
@close="infoWindowClose(marker)"
@open="infoWindowOpen(marker)"
>
<p>设备号:{{marker.merchantName}}</p>
</bm-info-window>
</bm-marker>
</div>
定位问题
前面已经说到了,vue-baidu-map是使用一个标签来进行初始化地图的
<template>
<baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
data () {
return {
center: {lng: 0, lat: 0},
zoom: 3
}
},
methods: {
handler ({BMap, map}) {
console.log(BMap, map)
this.center.lng = 116.404
this.center.lat = 39.915
this.zoom = 15
}
}
}
</script>
在JS里操作百度地图是new一个对象来给div初始化地图的,这个对象有很多种定位方法
在vue里使用标签初始化地图时,没有直接的地图对象来用,
但是在ready时的handle方法参数里会把地图对象传进去
虽然handle方法结束前不可做其他操作,只能拿来初始化地图,
但是在handle方法初始化的时候可以赋值Bmap和map,
最后需要时使用对象调用定位方法获取定位信息
handler({BMap, map}) {
this.BMap = BMap
this.map = map
this.center.lng=114.1159
this.center.lat=22.456
this.zoom = 15
},
getCurlocation() { // 获取浏览器当前定位
if (!this.BMap) return false
let BMap = this.BMap
//创建对象
let geolocation = new BMap.Geolocation()
geolocation.enableSDKLocation();//开启SDK辅助定位
let _this = this
geolocation.getCurrentPosition(function (r) {
//获取定位后的经纬度信息
_this.center = r.point
//给表单赋值
_this.form.devicePosition=r.point.lng+","+r.point.lat
})
}
图标问题
icon图标
在marker标签里有一个icon属性,可以直接换成你的icon图标,普通jpg图片也行
但是这里还有个细节,使用了icon属性后,别忘了size属性
不然弹出窗口信息的位置会错乱
<bm-marker
:position="{lng: marker.lng, lat: marker.lat}"
:icon="{url: marker.url, size: { width: 23, height: 25 }}"
@click="handleMarkerClick(marker)" >
</bm-marker>
最后
希望这篇博客能给遇到问题的你有帮助