高德地图

TODO

• marker 的位置随地图放大缩小会变化
• 线和 marker 加图例
• 只渲染部分区域的地图（例如只显示江苏）
• 线和 marker 移入、移除、点击事件

1. 安装 @amap/amap-jsapi-loader

npm i @amap/amap-jsapi-loader --save

template

<template>
  <div id="container" :class="$style.myMap"></div>
</template>

js

<script setup>
  import AMapLoader from '@amap/amap-jsapi-loader';

  function initMap() {
    AMapLoader.load(getConfig()).then(AMap => {
      const map = new AMap.Map('container', getOptions())
      map.on('click', e => {
        console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat() + ',' + map.getZoom())
      })
      return { map, AMap }
    })
  }

  function getOptions() {
    const options = {
      center: [116.117225, 33.57491],
      zooms: [3, 20], // 初始化地图层级
      zoom: 12.8,
      features: ['bg', 'road']
    }
    return options
  }

  function getConfig() {
    return  {
      key: '89f5e6cb762cc121a01f45d020b5f2e8', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.MarkerCluster', 'AMap.Weather'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: '1.1', // AMapUI 缺省 1.1
        plugins: [] // 需要加载的 AMapUI ui插件
      },
      Loca: {
        version: '2.0.0'
      }
    }
  }

  initMap()
</script>