vue在线高德地图

1.申请地图的key；（具体操作看官网）

2.安装npm loader包

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

3.创建地图文件map.vue

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

4.设置地图的基础样式

 #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }

5.引入loader

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

6.在data中声明map

data(){
      return{
        map:null,
     } 
 },

7.定义初始化map的方法

 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);
        })
    },

8.在mounted中调用map

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

9.map的插件的使用

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

在plugin中，要先定义，插件名具体在官网查找

定义之后要创建插件的实例，在map中addControl调用实例的方法；