1.下载高德地图插件
npm i @amap/amap-jsapi-loader --save
2.新建js文件,封装地图引入初始化代码
引入下载的插件
import AMapLoader from "@amap/amap-jsapi-loader";
//前段小葛
//抛出initMap初始化方法
export const initMap = () =>
AMapLoader.load({
key: "8dfbf62bdc04abbb13bbeca*********", // 申请好的Web端开发者Key,
首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [
"AMap.PolygonEditor",
"AMap.Autocomplete",
"AMap.PlaceSearch",//这些都是高德支持的部分API,选择需要得使用
"AMap.Scale",
"AMap.OverView",
"AMap.ToolBar",
"AMap.MapType",
"AMap.PolyEditor",
"AMap.CircleEditor",
"AMap.Geocoder",
"AMap.HeatMap",
],
});
3.搜索高德地图API,进入高德地图官方页
4.注册账号,认证开发者,新建应用,获取key
5.将代码中的key替换成你自己的key
key: "8dfbf62bdc04abbb13bbeca*********", // 替换成你自己的key
6.*.vue文件中引入该方法
//引入代码并建立地图盒子
7.地图加载
data() {
return {
//必须清除原有才可以新建,否则一直都是旧的
map: null,
AMap: null,
};
},
mounted() {
//地图初始化
initMap()
.then(async (Amap) => {
this.AMap = Amap;
this.map = new Amap.Map("containerAdd", {
//地图容器id与盒子id一致
viewMode: "3D", //是否为3D地图模式
zoom: 11, //初始缩放比例
center: [118.040303, 35.690348], //中心点位置
});
//缩放到合适的比例
this.map.setFitView();
// this.polyEditor.open();
})
.catch((e) => {
console.log(e);
});
},
实现效果
8.去除高德地图的logo