說明：
使用高德地圖同樣需要高德地圖開發者平臺申請賬號，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
展示效果
