wenjuan/src/components/MapContainer/MapContainer.vue

<template>
  <div id="container1" />
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  		securityJsCode: '0909896c00dc4bf28c6ee99a43533c53'
}
var map = {}; // 最好在data外声明要不然地图会一卡一卡
var markers = []; // 最好在data外声明要不然地图会一卡一卡
export default {
  components: {},
  props: ['message'],
  data () {
    return {
      autoOptions: {
        input: ''
      },
      auto: null,
      map: null,
      mapData: [
        {
          name: '测试',
          longitude: 104.113368, // 经纬度
          latitude: 30.518559, // 经纬度
          content: '123123123@163.com',
          // img:''
        },
      ],
    }
  },
  watch: {
    // 监听父组件传递的值
    message (newValue, oldValue) {
      console.log(newValue, oldValue)
      this.mapData = newValue
      this.initMap()
    }
  },
  created () {
    // 标注文字上的点击事件
    window.goshop = (item) => {
      this.$emit('MapItem', item)
    }
  },
  mounted () {
    // DOM初始化完成进行地图初始化
    // this.initMap()
  },
  beforeDestroy () {
    this.destroyMap();
  },
  methods: {
    initMap () {
      AMapLoader.load({
        key: '438a727f8ff61d71f33694f386c108c3', // 申请好的Web端开发者Key，首次调用 load 时必填
        terrain: true,
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.Marker', 'AMap.InfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          this.map = new AMap.Map('container1', {
            // 设置地图容器id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 10, // 初始化地图级别
            center: [104.113368, 30.518559] // 初始化地图中心点位置
          });
          this.map.addControl(new AMap.Scale())
          this.map.addControl(new AMap.ToolBar())
          this.map.addControl(new AMap.HawkEye())
          this.map.addControl(new AMap.Geolocation())
          this.markPoints()
          this.latitude()
        })
        .catch(e => {
          console.log(e)
        })
    },
    markPoints () {
      this.mapData.forEach((item, index) => {
        // 创建一个 Marker 实例：
        console.log(item.mapPunctuation)
        if (item.mapPunctuation) {
          var mapMsg = item.mapPunctuation
        } else {
          var mapMsg = item.mapMarker
        }
        if (mapMsg) {
          const pos = JSON.parse(mapMsg)
          const marker = new AMap.Marker({
            map: this.map,
            icon: new AMap.Icon({
              // size: new AMap.Size(19, 32),
              // anchor:new AMap.Pixel(20, 30),
              image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 默认图标的URL
            }),
            position: new AMap.LngLat(pos.longitude, pos.latitude),
            // position: new AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可                                        以是经纬度构成的一维数组[lng, lat]
          });
          markers.push(marker)
          // 将创建的点标记添加到已有的地图实例：
          this.map.add(marker);
          this.map.setFitView();
          // 给标记点添加事件
          marker.on('click', (e) => {
            this.setInfoWindows(e, item)
            console.log(e, item)
          })
        } else {
          return;
        }
      });
    },
    // 显示的弹出框组件
    setInfoWindows (e, item) {
      if (item.mapPunctuation) {
        var mapMsg = item.mapPunctuation
      } else {
        var mapMsg = item.mapMarker
      }
      // 信息窗体的内容
      const content = [
        `<div class="chuangti">`,
        `<div class="moren ">资源名称 : ${item.shopName || item.advertisingName || item.venueName}<div class="xiangq" onclick='goshop(${JSON.stringify(item)})'">详情 ></div></div>`,
        `<div class="">位置 : ${item.detailedLocation || item.detailedLocation}</div>`,
        `<div class="">租赁情况 : <span class="kongzhi">空置</span></div>`,
        '招商进度 : 无租赁申请</div>',
      ];
      const contentlist = [
        `<div class="chuangti">`,
        `<div class="moren ">资源名称 : ${item.shopName || item.advertisingName || item.venueName}<div class="xiangq" onclick='goshop(${JSON.stringify(item)})'>详情 ></div></div>`,
        `<div class="">位置 : ${item.detailedLocation || item.detailedLocation}</div>`,
        `<div class="">租赁人 :张三</div>`,
        `<div class="">经营类型 :休闲娱乐</div>`,
        `<div class="">联系方式 :1231312312312</div>`,
        `<div class="">到期时间 :2022-02-22</div>`,
      ];
      // 创建 infoWindow 实例
      const infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(8, 0),
        content: content.join('<br>') // 传入 dom 对象，或者 html 字符串
      });
      // 打开信息窗体
      const pos = JSON.parse(mapMsg)
      const dd = this.map.getCenter()
      // dd.pos = [e.pos[0], e.pos[1]]
      dd.lat = pos.latitude
      dd.lng = pos.longitude
      infoWindow.open(this.map, dd);
      infoWindow.setAnchor('bottom-center')
    },
    // 点击获取经纬度
    latitude () {
      this.map.on('click', (ev) => {
        // 触发事件的对象
        const target = ev.target;
        // 触发事件的地理坐标，AMap.LngLat 类型
        const lnglat = ev.lnglat;
        // 触发事件的像素坐标，AMap.Pixel 类型
        const pixel = ev.pixel;
        // 触发事件类型
        const type = ev.type;
      });
    },
    destroyMap () {
      if (this.map) {
        this.map.destroy();
        this.map = null;
      }
    }
  }
}
</script>
<style lang="scss">
#container1 {
  position: relative;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
::v-deeep  .amap-info-content{
  padding:0px;
}
.chuangti{
  font-size: 12px;
}
.moren{
  // width: 160px;
display: flex;
justify-content: space-between;
}
.xiangq{
  color: #3F9B6A;
}
.kongzhi{
  color: #F59A23;
}
.amap-icon{
  img {
     width:19px;
     height:30px;
   }
}
</style>