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

朴灿烈づ我的快乐病毒、 2023-10-07 19:24 63阅读 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 条评论，63人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 python基于高德地图坐标拾取系统获取地址坐标

基于高德坐标拾取系统: [https://lbs.amap.com/console/show/picker][https_lbs.amap.com_console_show_

曾经终败给现在/ 2023年06月16日 07:24/ 0 赞/ 25 阅读

相关 Vue+高德地图

基于VUE的高德地图展示及标点功能描述：在vue框架（vue-cli3）中使用高德地图，展示地图，规划行政区域，标点。 ![在这里插入图片描述][waterm

今天药忘吃喽~/ 2023年02月09日 13:29/ 0 赞/ 16 阅读

相关高德地图之拾取地点

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

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

相关高德地图工具包

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

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

相关高德地图工具包

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

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

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

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

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

相关调用高德地图

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

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