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源创计划”，欢迎正在阅读的你也加入，一起分享。