vue 给圆遮盖物添加文字 高德地图_近期使用高德地图 JS api 的部分总结

高德 JS api 总结

简介

此次是对最近使用高德地图的JS api做一个总结，关于各个类可以实现什么效果，以及如何使用。之后会总结一些常见问题的优化思路和解决办法。

Vue 中引入高德地图 api

npm 包引入

npm i amap-js -S

复制代码

优点：开箱即用，使用简单

script 脚本引入

在 index.html 中加入链接，链接后跟申请的 key。

src="https://webapi.amap.com/maps?v=1.4.15&key=[key]"

>

复制代码

在 vue.config.js 中配置全局名，在代码中可以通过 vue 实例直接调用。

module.exports = {

configureWebpack: {

externals: {

AMap: "AMap",

AMapUI: "AMapUI"

}

};

}

复制代码

优点：定制化程度高，可以按需组合功能。

高德地图基础概念

地图

地图是高德地图 api 的承载，所有的 api 都需要由一个地图来接收，同一个界面可以有多个地图。

复制代码

this.map = new this.AMap.Map("container", {

resizeEnable: true, // 是否监控地图容器尺寸变化

zoom: 15, // 初始化地图层级