记录vue amap实现地图加手绘图，描点

<template>
  <div class="home">
      <div class="amap-page-container">
          <div id="map-container"></div>
      </div>
      <div class="back_title" v-if="typeList && typeList.length > 0">
          <div v-for="(item, index) in typeList" :key="index" class="header_icon">
              <a-tooltip placement="top" v-model="item.visible" trigger="click" v-if="item.moduleList && item.moduleList.length > 0">
                  <div @click="checkVisible(item)">
                      <div class="icon">
                          <img class="icon_img" :src="JSON.parse(item.logo)[0].filePath" alt="" />
                      </div>
                      <div class="title">{{ item.title ? item.title : item.name }}</div>
                  </div>
                  <template slot="title">
                      <div class="tool_type">
                          <div v-for="(child, childIndex) in item.moduleList" :key="childIndex" class="module" @click="clickResource(child)">
                              <div class="icon_type">
                                  <img class="icon_img_type" :src="JSON.parse(child.logo)[0].filePath" alt="" />
                              </div>
                              <div class="module_title">{{ child.title ? child.title : child.name }}</div>
                          </div>
                      </div>
                  </template>
              </a-tooltip>
              <div v-else @click="clickResource(item)">
                  <div class="icon">
                      <img class="icon_img" :src="JSON.parse(item.logo)[0].filePath" alt="" />
                  </div>
                  <div class="title">{{ item.title ? item.title : item.name }}</div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import { queryDomainDrawing_map_infoFind, queryCommonResourceTypeTree } from '@/api/scenic'
import { queryCommonBasic_ResourceTotal } from '@/api/resource_other'
const iconArr = ['alarm', 'dining', 'medicalPoint', 'monitor', 'park', 'public', 'shopping', 'spot', 'toilet', 'touristCenter', 'trip']
export default {
  name: 'worldMap',
  components: {},
  data() {
      return {
          map: null,
          markers: [],
          markersPosition: [],
          geoCoder: null,
          keyWord: '',
          longAndLat: '',
          mapMark: null,
          localSearch: '',
          textTip: '',
          isshowTip: false,
          address: '',
          mapObj: {},
          typeList: [],
          resourceCode: JSON.parse(sessionStorage.getItem('currentBindScenic')).resourceCode,
          resourceList: []
      }
  },
  created() {
      this.getTypeList()
  },
  mounted() {
      this.getMapConfig()
  },
  methods: {
      async getMapConfig() {
          const res = await queryDomainDrawing_map_infoFind({ resourceCode: this.resourceCode })
          this.mapObj = res
          this.mapInit([res.longitude, res.latitude])
      },
      clickResource(child) {
          queryCommonBasic_ResourceTotal(child.code, { resourceCode: this.resourceCode }).then(res => {
              this.resourceList = res
              let icon = ''
              if (iconArr.indexOf(child.code) == -1) {
                  icon = 'public'
              } else {
                  icon = child.code
              }
              let mapIcon = new window.AMap.Icon({
                  size: new window.AMap.Size(40, 50), // 图标尺寸
                  image: require('../../../assets/map/' + icon + '.png'), // Icon的图像
                  imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
                  imageSize: new window.AMap.Size(30, 40) // 根据所设置的大小拉伸或压缩图片
              })
              if (res && res.length > 0) {
                  this.mapInit([res[0].longitude, res[0].latitude])
                  res.forEach(item => {
                      let marker = new window.AMap.Marker({
                          position: new window.AMap.LngLat(item.longitude, item.latitude),
                          offset: new window.AMap.Pixel(0, 0),
                          icon: mapIcon,
                          title: item.name,
                          zoom: 13
                      })
                      this.map.add(marker)
                  })
              }
          })
      },
      getTypeList() {
          queryCommonResourceTypeTree({ resourceCode: this.resourceCode, gisFlag: 1 }).then(res => {
              this.typeList = res.typeList.concat(res.moduleList)
              this.typeList.forEach(item => {
                  if (item.moduleList && item.moduleList.length > 0) {
                      item.visible = false
                  }
              })
          })
      },
      checkVisible(item) {
          item.visible = !item.visible
          this.$forceUpdate()
      },
      mapInit(center) {
          const self = this
          window._AMapSecurityConfig = {
              securityJsCode: '75d6ab44dd60f23334d33333333333425a36e350cc39167f'//申请高德地图的key
          }
          let imageLayer = new window.AMap.ImageLayer({
              url: self.mapObj.url, //手绘地图图片
              bounds: new window.AMap.Bounds(
                  //图片对角坐标经纬度
                  [self.mapObj.bottomLeftLongitude, self.mapObj.bottomLeftLatitude],
                  [self.mapObj.topRightLongitude, self.mapObj.topRightLatitude]
              ),
              zooms: self.mapObj.webZoomSize
          })
          self.map = new window.AMap.Map('map-container', {
              zoom: 11, // 级别
              center: center,
              layers: [new window.AMap.TileLayer(), imageLayer],
              resizeEnable: true
          })

          self.map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'], function() {
              //创建并添加工具控件,上下左右移动，以及缩放
              self.map.addControl(new window.AMap.ToolBar())
              self.map.addControl(new window.AMap.Scale())
              self.map.addControl(new window.AMap.OverView({ isOpen: true }))
              self.map.addControl(new window.AMap.MapType())
              self.map.addControl(new window.AMap.Geolocation())
          })
      },
      editText() {
          this.isshowTip = false
      }
  }
}
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
  // overflow: hidden;
}
.amap-page-container {
  height: 100%;
  width: 100%;
}
#map-container {
  width: 100%;
  height: 100%;
}
.back_title {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 70px;
  left: 50%;
  width: 956px;
  height: 110px;
  margin-left: -467px;
  background: url('../../../assets/nav-bg.png') center 38px no-repeat;
}
.header_icon {
  margin: 0 20px;
}
.icon {
  margin-top: 8px;
  .icon_img {
      width: 65px;
      height: 65px;
  }
  .icon_img:hover {
      transform: scale(1.1);
      cursor: pointer;
  }
}
.icon_type {
  text-align: center;
}
.icon_img_type {
  width: 35px;
  height: 35px;
}
.title {
  margin-top: 4px;
  color: #000;
  font-size: 12px;
  text-align: center;
}
.title:hover {
  cursor: pointer;
}
.tool_type {
  display: flex;
  justify-content: center;
}
.module {
  margin: 5px 20px;
  padding: 5px;
}
.module:hover {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  cursor: pointer;
}
.module_title {
  color: white;
  font-size: 12px;
  width: 50px;
  text-align: center;
  margin-top: 3px;
}
</style>