mapv自定义图片坐标点

文档：https://github.com/huiyan-fe/mapv/blob/master/src/map/baidu-map/Layer.md

<template>
  <div id="map" :style="{height:height}" />
</template>

<script src="http://mapv.baidu.com/build/mapv.min.js"></script>
<script>
import build from '@/assets/build.png'
export default {
  name: 'EcharsMap',
  props: {
    points: { // 经纬度
      type: Array,
      default: () => []
    },
    height: { // 自定义地图高度
      type: String,
      default: '700px'
    },
  },
  data() {
    return {
      map: null,  // 地图实例
      pointList: []
    }
  },
  watch: {
    // 根据传入坐标的经纬度创建图片
    points(values) {
      const img = new Image()
      img.onload = () => {
       // 构造数据
        values.forEach(item => {
          const { lon, lat, proName } = item
          this.pointList.push({
            geometry: {
              type: 'Point', //样式为点
              coordinates: [lon, lat]	// 点在地图中的经纬度
            },
            icon: img,  // 自定义的图片为点
            tag: { proName }//点的信息，用于后面实现点击标的点弹窗在弹窗中显示详细信息
          })
        })
        const dataSet = new mapv.DataSet(this.pointList)
        // mapv图层散点图配置项
        const options = {
          draw: 'icon',
          methods: {
            click: (datas) => {
               if (datas) { // 设置点击生成图标点弹框信息
                  const { geometry, tag: {proName} } = datas
                  const opts = {
                    width: 0, // 信息窗口宽度
                    height: 0, // 信息窗口高度
                    title: '<h3 style="float: left">'+tag.proName+'</h3>', // 信息窗口标题
                    enableMessage: true, //设置允许信息窗发送短息
                    message: ""
                  }
                  let bPoint = new BMap.Point(geometry.coordinates[0], geometry.coordinates[1])
                  this.map.openInfoWindow(new BMap.InfoWindow(
                    `
                    <div class='BMap_bubble_content'>
                      ${proName}
                    </div>
                  `
                  ),bPoint);
               }
            }
          },
          size: 25,//设置图片大小
          width: 25,
          height: 25,
        }
        const mapvLayer = new mapv.baiduMapLayer(this.map, dataSet, options);
      }
      // 图片加载完后在执行onload  防止图片没加载完报错
      img.src = build
    }
  },
  mounted() {
    // 创建地图
    this.map = new BMap.Map("map",{ enableMapClick: false })
    // 设置地图初始化显示位置
    this.map.centerAndZoom('石家庄', 12)
    // 缩放地图
    this.map.enableScrollWheelZoom(true);
    // this.map.clearOverlays()
  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>
</style>