『工作记录』🤩 Vue + 原生高德地图

官方文档：https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1

接入地图

• 按 NPM 方式安装使用 Loader ：

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

• 创建容器

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

• 设置高度样式

#container{
    width: 100px;
    height: 100px;
}

• 引入JS包

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

• 地图初始化函数 initMap

methods:{
    initMap(){
        AMapLoader.load({
            key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:5,           //初始化地图级别
                center:[105.602725,37.076636], //初始化地图中心点位置
            });
        }).catch(e=>{
            console.log(e);
        })
    },
},

• 提示：JSAPI Loader是我们提供的 API 加载器，其加载方式为异步加载 JS API 内容，所以在使用 AMap 对象前需进行验证，这种使用场景下，
• JSAPI不会阻塞页面其他内容的执行和解析，但是 JSAPI 的脚本解析将有可能发生其他脚本资源执行之后，因为需要特别处理，以保证在 AMap对象完整生成之后再调用 JSAPI 的相关接口，否则有可能报错。
• 调用地图初始化函数：mounted 函数会在 DOM 初始化完成后调用，建议在 mounted 函数中调用地图初始化方法。

mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
}

• 代码汇总

<template>
  <div class="map">
    <div id="container"></div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: null,
    };
  },
  created() {},
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "[您的key]", //设置您的key
        version: "2.0",
        plugins: ["AMap.ToolBar", "AMap.Driving"],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0",
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 5,
            zooms: [2, 22],
            center: [105.602725, 37.076636],
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped>
#container {
  width: 100px;
  height: 100px;
  position: absolute;
}
</style>

点标记 Marker

// 创建一个 Marker 实例： 
var marker = new AMap.Marker({ 
    position: new AMap.LngLat(116.39, 39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] 
    title: '北京' 
}); 

// 将创建的点标记添加到已有的地图实例： 
map.add(marker); 

// 移除已创建的 marker 
map.remove(marker);