vue-baidu-map遇到的问题

项目使用到的地方

项目中用到的地方不多，主要用来在登记设备时添加一个定位信息（定位），以及在页面展示地图，并把设备排列在地图上（标点），有不同图标区分（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>

最后

希望这篇博客能给遇到问题的你有帮助