AMap 高德地图的运用总结

导读：记录高德地图的简单应用。包含 地图初始化，标记点位，添加点位图标，点位点击事件打开信息窗口 等等。

1、成为开发者并创建key

1.1 注册登录高德地图

官网： https://lbs.amap.com/
注意是 开发者注册

1.2 打开控制台

控制台 -> 我的应用 -> 创建新应用->添加key （服务平台选择web端）
就生成了key，这个key后面要用

2、vue项目应用

2.1 安装插件

 npm i @amap/amap-jsapi-loader

2.2 初始化地图

引入插件AMapLoader

import AMapLoader from '@amap/amap-jsapi-loader'

加载和地图初始化，参考快速上手
设置地图中心 this.map.setCenter([经纬度值])

    async initMap() {
      this.AMap = await AMapLoader.load({
        key: 'your mapKey',
        version: '1.4.15', //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等
      })

      this.map = await new this.AMap.Map('your_map_Container', {
        mapStyle: 'amap://styles/grey', // 地图风格
        pitch: 20, // 角度，有效范围 0 度- 83 度
        viewMode: '3D',
        terrain: true,
        zoom: 11, //地图级别
        center: [116.481181, 39.989792], // 设置地图中心
      })
      this.map.setFeatures(['bg', 'road', 'building'])
      this.initInfo()
      this.markers()
    },

2.3 初始化信息窗口

    // 信息窗口
    initInfo() {
      this.infoWindow = new this.AMap.InfoWindow({
        content: this.$refs.yourContainer, //  信息容器的页面内容
        anchor: 'top-left', // 信息窗口的位置
      })
    },

2.4 标记点位 Marker

const marker = new AMap.Marker({
position // 设置点位经纬度，new this.AMap.LngLat
icon // 图标
}) // 创建点位

map.add(marker)  // 添加到地图

2.5 为Marker 添加事件

    markers() {
      this.markerList = []
      // points 包含经纬度坐标点 的数组
      this.points.map(item => {
        let marker = new this.AMap.Marker({
          position: new this.AMap.LngLat(item.longitude, item.latitude), // 位置
          icon
        })
        // 为marker 添加事件，并唤起信息窗体
        marker.on('click', () => {
          this.map.setCenter([item.longitude, item.latitude])
          this.openInfoWin(item)
        })
        this.markerList.push(marker)
      })

      this.map.add(this.markerList)  // 添加到地图
    },

2.6 为Marker 设置图标

      const activeIcon = new this.AMap.Icon({
        size: new this.AMap.Size(75, 119), // 图标尺寸
        image: require('@/assets/img/XXXXXXX/activeIcon.png'), // 激活Icon的图像
        imageSize: new this.AMap.Size(75, 119), // 根据所设置的大小拉伸或压缩图片
      })
	
	  marker.setIcon(activeIcon )

2.7 唤起信息窗体

    openInfoWin(item) {
      var position = new this.AMap.LngLat(item.longitude, item.latitude)
      this.infoWindow.open(this.map, position)
    },

2.8 最后销毁地图实例

 beforeDestroy() {
    this.map.destroy()
    this.AMap = null
  },

ps:设置地图容器的宽高尺寸~