高德地图 API 开发 amap-vue

news/2024/11/22 4:13:13/

标题amap-vue 是对高德地图的二次封装的一个插件适用于 vue

amap-vue官方的介绍：
AMap-Vue 是一个基于 Vue.js 的高德地图 AMap JSAPI 封装。
通过它，你能够以近似普通 UI 组件的方式来开发地图应用，而无需关心 AMap 的具体操作。
链接：https://jimnox.gitee.io/amap-vue/intro/
话不多说上代码

1.安装依赖

yarn add @amap/amap-vue@^1.4.0 # 或 npm install --save @amap/amap-vue@^1.4.0

2.在mian.js里引入
一般我们会配合 element-ui UI或者其他UI来进行开发

import AmapVue from "@amap/amap-vue";
AmapVue.config.version = "2.0"; // 默认2.0，这里可以不修改
AmapVue.config.key = ""; // 需要在高德地图里创建 自己的key
AmapVue.config.plugins = ["AMap.ToolBar","AMap.MoveAnimation","AMap.Autocomplete", //输入提示插件"AMap.PlaceSearch", //POI搜索插件"AMap.Scale", //右下角缩略图插件 比例尺"AMap.OverView", //地图鹰眼插件"AMap.ToolBar", //地图工具条"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制"AMap.PolyEditor", //编辑 折线多，边形"AMap.CircleEditor", //圆形编辑器插件"AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置// 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载
];
Vue.use(AmapVue);

2.amap的实例使用

<amap><amap-info-window :position="position" :vislble="visible" is-custom><div>content of this info window</div></amap-info-window>
</amap>

3.使用地图的工具和更改主题的颜色

//:zoom="map.zoom" 默认的缩放级别   
//map-style 主题颜色的修改 如果是自定义的地图 主题 需要配置安全秘钥 securityJsCode<amap :center="map.center" :zoom="map.zoom" map-style="amap://styles/whitesmoke"></amap>