1、安装插件
npm i amap/amap-jsapi-loader
目前用的是1.0.1
2、创建共用的js文件map.js
/* 引入下载的插件 */
import AMapLoader from "@amap/amap-jsapi-loader";
//抛出initMap初始化方法
export const initMap = () =>
AMapLoader.load({
key: "", // 申请好的Web端开发者Key,
/* 首次调用 load 时必填 */
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [
"AMap.PolygonEditor",
"AMap.MoveAnimation",
"AMap.PlaceSearch",
"AMap.AutoComplete",
"AMap.Geocoder"
], // 所用的组件
});
3、在所需的页面调用
import {
initMap
} from '../utils/map'
initMap().then(async (Amap) => {
this.AMap = Amap;
this.map = new Amap.Map("containerAdd", {
//地图容器id与盒子id一致
viewMode: "3D", //是否为3D地图模式
zoom: 15, //初始缩放比例
zooms: [3, 16],
resizeEnable: true,
center: [98.901523, 39.984146], //中心点位置
})
})
4、在index.html中引入css样式
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>