vue2高德地图基本使用（记录）

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
//  使用前先下载 npm i @amap/amap-jsapi-loader --save
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      map: null //初始化 map 对象
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "此处填入我们注册账号后获取的Key", 
        version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", { //设置地图容器id
          pitch:0, // 地图俯仰角度，有效范围 0 度- 83 度
          viewMode: "3D", //是否为3D地图模式
          zoom: 15, //初始化地图级别
          terrain: true, // 开启地形图
          mapStyle: "amap://styles/dark",//更换地图样式
          center: [116.397499,39.908722], //初始化地图中心点位置
        });
        this.markers(AMap)
      }).catch(e => {
        console.log(e);
      })
    },
    markers(AMap){
      // 创建一个 Marker 实例：
      let arr = [{lon:116.397499,lat:39.908722},{lon:116.397399,lat:39.9037344},{lon:116.392399,lat:39.905733}]
      arr.forEach((value,index,array) => {
        let postion = [];
        postion.push(array[index].lon/1)
        postion.push(array[index].lat/1)
        let marker = new AMap.Marker({
          map: this.map,
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png',
          position: postion,
          offset: new AMap.Pixel(-13, -30)
        });
        this.map.add(marker);
        console.log(postion,"postion")
      })
      // var marker = new AMap.Marker({
      //   position: new AMap.LngLat(116.397499,39.908722),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      //   title: '北京'
      // });

// 将创建的点标记添加到已有的地图实例：

// 移除已创建的 marker
//      this.map.remove(marker);
    }
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  }
}
</script>

<style>
#container {
  width: 80%;
  height: 800px;
  margin: 50px auto;
  border: 1px solid red;
}
</style>