说明：
使用高德地图同样需要高德地图开发者平台申请账号，key等，同样需要制作自定义调试基座这些操作可以参考
地图的定位同样可以，代码完全一样
定位获取到的信息
地图的展示
高德地图的展示和百度地图的展示原理是一样的，只不过是所依赖的一个是高德的框架，一个是百度的框架
<template>
<view class="component-amap">
<view class="loading">地图加载中</view>
<view id="amap" class="amap" :listArr="listArr" :change:listArr="ModuleInstance.setParkList"></view>
</view>
</template>
mounted(){
if (window.AMap) {
// 观测更新的数据在 view 层可以直接访问到
this.initAmap();
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = `https://webapi.amap.com/maps?v=2.0&key=b0c8fc70cd402ddb153c3416e9261d50`;//您申请的key值
//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
script.onload = () => {
window._AMapSecurityConfig = {
securityJsCode:'f1b946e6f51b1235374f1f92c38b0c33',//您申请的安全密钥
}
this.initAmap();
}
document.head.appendChild(script);
}
},
methods: {
initAmap(){
this.map = new AMap.Map('amap', {
zoom: 13,//显示的缩放级别
zooms: [2, 30],//地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
center: [113.276521,23.133519]
});
this.map.on("complete", ()=>{
console.log("地图加载完成！");
this.createLabelsLayer();
});
},
这里的代码只是展示了一些关键信息，其他实现需要查看高德关于JavaScript API
展示效果
