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.15plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap)=>{this.map = new AMap.Map("container",{  //设置地图容器idviewMode:"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.15plugins: ["AMap.ToolBar", "AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map("container", {//设置地图容器idviewMode: "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调用实例的方法；