avue-input-map 高德地圖選擇座標地點

1 第一步 申請key

登錄高德開放平臺

https://console.amap.com/dev/key/app

2 第二步引入 js 與密鑰

• securityJsCode 對應的高德地圖申請key的密鑰
• 地址中也有 key 需要注意

    <!-- 地圖座標選擇 -->
    <script>
      window._AMapSecurityConfig = {
        securityJsCode: ''
      }
    </script>
    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=你的key&plugin=AMap.PlaceSearch'></script>
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

3 項目中使用

在 Vue 代碼中

<avue-input-map :params="params" placeholder="請選擇地圖" v-model="mapform"></avue-input-map>

3 .1 參數

params: {
        zoom: 15,//地圖顯示的縮放級別範圍，在PC上，默認範圍[3,18]，取值範圍[3-18]；在移動設備上，默認範圍[3-19]，取值範圍[3-19]
        zoomEnable: true,//地圖是否可通過鼠標拖拽平移。
        dragEnable: false,//地圖是否可縮放
      },
mapform: [112.345, 23.44, '中國北京'],

本文同步分享在 博客“早起的年輕人”（CSDN）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。