avue-input-map 高德地图选择坐标地点

朴灿烈づ我的快乐病毒、 2023-10-07 19:24 8阅读 0赞

##### 1 第一步 申请key #####

[登录高德开放平台][Link 1]

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

![在这里插入图片描述][777b80e087ad4d058b4a071802a0b4ef.png]

##### 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, '中国北京'],

[Link 1]: https://console.amap.com/dev/key/app
[777b80e087ad4d058b4a071802a0b4ef.png]: https://img-blog.csdnimg.cn/777b80e087ad4d058b4a071802a0b4ef.png

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关高德地图/百度地图 api 根据select 选择地点进行位置的显示；

需求：根据select 选择器选择城市地名切换地图位置变化预期效果：高德地图API：思路：根据高德地图api（概述-地图 JS API | 高德地图API）官方实例进行修...

偏执的太偏执、/ 2024年04月24日 20:59/ 0 赞/ 67 阅读

相关 avue-input-map 高德地图选择坐标地点

1 第一步申请key [登录高德开放平台][Link 1] > https://console.amap.com/dev/key/app ![在这里插入图片描述][

朴灿烈づ我的快乐病毒、/ 2023年10月07日 19:24/ 0 赞/ 9 阅读

相关高德地图获取经纬度坐标

[高德地图获取经纬度坐标： https://lbs.amap.com/console/show/picker][https_lbs.amap.com_console_show_

川长思鸟来/ 2023年07月17日 11:17/ 0 赞/ 6 阅读

相关高德地图之拾取地点

高德地图官方有API，有文档，但是大家懂的，有些东西并没有说明。所以，我打算将自己实现对高德地图展示、定位以及导航的功能步骤做一个总结，分享给大家。本文作为总结高德地图使用，

谁借莪１个温暖的怀抱￠/ 2022年06月16日 00:11/ 0 赞/ 2692 阅读

相关高德地图工具包

package com.ybdc.yy.base.basis.utils.map; import java.io.BufferedReader; impor

ゝ一世哀愁。/ 2022年06月13日 03:26/ 0 赞/ 302 阅读

相关高德地图工具包

package com.ybdc.yy.base.basis.utils.map; import java.io.BufferedReader; impor

布满荆棘的人生/ 2022年06月13日 03:25/ 0 赞/ 291 阅读

相关高德地图点击获取坐标

<link href="<?=Yii::getAlias('@resUrl/css/manage.css');?>" rel="stylesheet">

刺骨的言语ヽ痛彻心扉/ 2022年05月17日 11:09/ 0 赞/ 499 阅读

相关百度坐标高德坐标转换

function bd_decrypt(bd_lon, bd_lat) { //百度转高德坐标转换 var pi_value = Math.PI;

约定不等于承诺〃/ 2022年05月08日 15:12/ 0 赞/ 784 阅读

相关百度地图墨卡托坐标转高德经纬度坐标（偏移小）

参考：[http://www.site-digger.com/tools/mct2latlng.html][http_www.site-digger.com_tools_mct

雨点打透心脏的1/2处/ 2021年12月17日 11:43/ 0 赞/ 631 阅读

相关调用高德地图

//F12 切换手机模式 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-eq

迈不过友情╰/ 2021年10月31日 16:34/ 0 赞/ 571 阅读