wenjuan/src/components/MapContainer/MapXian.vue

<template>
  <div id="container2" />
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  		securityJsCode: '0909896c00dc4bf28c6ee99a43533c53'
}
var map = {}; // 最好在data外声明要不然地图会一卡一卡
var markers = []; // 最好在data外声明要不然地图会一卡一卡
export default {
  name: 'MapXian',
  components: {},
  props: ['message', 'edit', 'sendMap'],
  data () {
    return {
      auto: null,
      map: null,
      newValue: false,
      mapData: { longitude: 104.113368, // 经纬度
        latitude: 30.518559, // 经纬度
      },
    }
  },
  watch: {
    // 监听父组件传递的值
    edit (newValue, oldValue) {
      console.log(newValue, oldValue)
      if (newValue == false) {
        this.newValue = true
      }
    }
  },
  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.Scale'等
      })
        .then(AMap => {
          this.map = new AMap.Map('container2', {
            // 设置地图容器id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 10, // 初始化地图级别
            center: [this.message.longitude || 104.113368, this.message.latitude || 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.map.remove(markers);
      let marker;
      // 创建一个 Marker 实例：
      if (this.newValue === false) {
        marker = new AMap.Marker({
          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(this.message.longitude || 104.113368, this.message.latitude || 30.518559),
        });
      } else {
        marker = new AMap.Marker({
          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(this.mapData.longitude, this.mapData.latitude),
        });
      }
      // 将创建的点标记添加到已有的地实例：
      markers.push(marker);
      this.map.add(marker);
      this.map.setFitView();
    },
    // 点击获取经纬度
    latitude () {
      this.map.on('click', (ev) => {
        if (this.newValue) {
          // 触发事件的地理坐标，AMap.LngLat 类型
          const lnglat = ev.lnglat;
          // 触发事件的像素坐标，AMap.Pixel 类型
          const pixel = ev.pixel;
          // 触发事件类型
          const type = ev.type;
          this.mapData.longitude = lnglat.lng
          this.mapData.latitude = lnglat.lat
          this.markPoints()
          console.log(lnglat)
          this.sendMap(this.mapData)
        }
      });
    },
    destroyMap () {
      if (this.map) {
        this.map.destroy();
        this.map = null;
      }
    }
  }
}
</script>
<style lang="less">
#container2 {
  position: relative;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
.amap-icon{
  img {
     width:19px;
     height:30px;
   }
}
</style>