qa-prevention-gwj-vue/src/views/emergen_cyrescue/emergency_map/components/mapAssembly.vue

<template>
  <div>
    <div id="map"/>
  </div>
</template>
<script>
import { requestFN } from '@/utils/request'

let mapInstance
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.mapInit()
  },
  beforeDestroy() {
    mapInstance = null
  },
  methods: {
    // 地图初始化
    mapInit() {
      mapInstance = new window.BMapGL.Map('map')
      mapInstance.centerAndZoom(new window.BMapGL.Point('119.645516', '39.934547'), 15)
      mapInstance.enableScrollWheelZoom(true)
    },
    // 扎点
    addPoint(anchor) {
      if (!anchor.iconImg) throw new Error('请传入图标')
      if (!anchor.imageSize) throw new Error('请传入图片大小')
      if (!anchor.lng) throw new Error('请传入经度')
      if (!anchor.lat) throw new Error('请传入纬度')
      const imageSize = new window.BMapGL.Size(23, 30)
      const icon = new window.BMapGL.Icon(anchor.iconImg, imageSize, { imageSize })
      const point = new window.BMapGL.Point(anchor.lng, anchor.lat)
      const marker = new window.BMapGL.Marker(point, { icon })
      mapInstance.addOverlay(marker)
    },
    // 初始话定位点
    getInfo(id) {
      requestFN('/dictionaries/listTree').then((data) => {
        this.treeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
        console.error('获取树形数据失败', e)
      })
    }
  }
}
</script>

<style scoped lang="scss">
#map {
  width: calc(100vw - 210px);
  height: calc(100vh - 84px);
}
</style>