高德地图api 地理编码(地址-->坐标)geocoder.getLocation在官方可以测试出结果,下载代码到本地却用不了 问题解决

2023-11-01

问题

高德地图api 地理编码(地址-->坐标)功能,通过输入 地址信息 得到 经纬度信息。geocoder.getLocation在官方可以测试出结果,下载代码到本地却用不了。

官方示例测试,可以从地址得到坐标

下载官方代码本地运行却出不了结果

demo.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地理编码(地址->经纬度)</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,body,#container{
            height:100%;
            width:100%;
        }
        .btn{
            width:10rem;
            margin-left:6.8rem;   
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style='width:28rem;'>
    <label style='color:grey'>地理编码,根据地址获取经纬度坐标</label>
    <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text" >地址</span></div>
            <input id='address' type="text" value='北京市朝阳区阜荣街10号' >
    </div>
    <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div>
            <input id='lnglat' disabled type="text">
    </div>
    <input id="geo" type="button" class="btn" value="地址 -> 经纬度" />
</div>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    
    var geocoder = new AMap.Geocoder({
        city: "010", //城市设为北京,默认:“全国”
    });
    
    var marker = new AMap.Marker();
    
    function geoCode() {
        var address  = document.getElementById('address').value;
        geocoder.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat = result.geocodes[0].location
                document.getElementById('lnglat').value = lnglat;
                marker.setPosition(lnglat);
                map.add(marker);
                map.setFitView(marker);
            }else{
                log.error('根据地址查询位置失败');
            }
        });
    }
    document.getElementById("geo").onclick = geoCode;
    document.getElementById('address').onkeydown = function(e) {
        if (e.keyCode === 13) {
            geoCode();
            return false;
        }
        return true;
    };
</script>
</body>
</html>

为了避免跨域问题,把html运行到服务器,

cmd命令行进入html文件所在目录,执行命令:

python -m http.server 9999

注意:python环境是python3

浏览器访问

http://localhost:9999/demo.html

 点击 地址->经纬度 按钮 没有转换成功,如下图:

解决

官方提示 2021年12月02日以后申请的key需要配合安全密钥一起使用。

官方文档:

JS API 安全密钥使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API

添加密钥 具体代码如下:

<div id='container' ></div>
<script type="text/javascript">
  window._AMapSecurityConfig = {
  securityJsCode:'「您申请的安全密钥」',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> 
<script type="text/javascript" >
  // 地图初始化应该在地图容器div已经添加到DOM树之后
  var map = new AMap.Map('container', {
    zoom:12
  })
</script>

注意:

1.安全密钥的script需要添加到key script之前。

2.这是明文使用密钥,不安全,生产环境应该通过代理服务器转发安全密钥。

添加安全密钥后,成功效果如下: 

完成!enjoy it!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

高德地图api 地理编码(地址-->坐标)geocoder.getLocation在官方可以测试出结果,下载代码到本地却用不了 问题解决 的相关文章

  • PowerToys安装

    PowerToys 是微软开发者开发的免费实用工具集 可以用于高级用户调整和简化 Windows 操作 以提高效率 官网安装方法 https learn microsoft com zh cn windows powertoys insta
  • Oracle数据库startup mount时的报错处理(ORA-01078&LRM-00109)

    安装监听 Disconnected oracle rac1 netca Oracle Net Services Configuration oracle rac1 sqlplus as sysdba SQL Plus Release 11
  • 在win10系统下不能运行VC++6.0的解决方法

    win10系统下出现 VC6 0应用程序无法正常启动 0x0000142 解决方法 将英文版的MSDEV exe文件复制粘贴替换到vc 6 0 Microsoft Visual Studio Common MSDev98 Bin文件目录下运
  • 树莓派4B-串口、多串口配置及详细使用攻略

    相比树莓派零 1 2 以及 3 的双串口 UART0 PL011 和 UART1 mini UART 树莓派4 中新增了 4 个 PL011 串口共计有 6 个 UART 整理此笔记用作记录和配置参考 注意 目前搜到的大多数描述树莓派 4
  • FreeRTOS 软件定时器的使用

    FreeRTOS中加入了软件定时器这个功能组件 是一个可选的 不属于freeRTOS内核的功能 由定时器服务任务 其实就是一个定时器任务 来提供 软件定时器是当设定一个定时时间 当达到设定的时间之后就会执行指定的功能函数 而这个功能函数就叫
  • Openresty(二十一)ngx.balance和balance_by_lua灰度发布

    一 openresty实现灰度发布 灰度发布 说明 早期 博客对 灰度 发布的 概念 进行解读 并且对 原生 nginx 灰度实现进行讲解 后续 主要拿 节点引流 的灰度发布 并且关注 gray灰度策略 相关借鉴 回顾HTTP反向代理流程
  • idea创建springboot项目和springcloud项目方法

    一 创建springboot项目 1 选择File gt New gt Project gt Spring Initialer gt 点击Next 2 填写项目相关的信息 gt 点击next 3 选择web gt web gt 点击next
  • 利用PyCharm操作Github(二):分支新建、切换、合并、删除

    在文章利用PyCharm操作Github 仓库新建 更新 代码回滚中 我们已经学习到了如何利用PyCharm来操作Github 其中包括了一些常见的Github操作 仓库的新建 更新以及代码回滚 在本文中 我们将介绍Git的另一部分的常见操
  • LVS+Keepalived 实现高可用负载均衡

    一 Keepalived介绍 keepalived是在Linux系统下的一个轻量级的高可用解决方案 是使用C语言编写的 在 Keepalived 中实现了一组检查器 可以根据服务集群中服务器的健康状态 自动的进行动态主备切换 管理 VRRP
  • python用支持向量机回归(SVR)模型分析用电量预测电力消费

    最近我们被客户要求撰写关于支持向量机回归的研究报告 包括一些图形和统计输出 本文描述了训练支持向量回归模型的过程 该模型用于预测基于几个天气变量 一天中的某个小时 以及这一天是周末 假日 在家工作日还是普通工作日的用电量 视频 支持向量机S
  • 高德+vue Object3DLayer强制刷新后找不到的问题

    报错错误展示 解决方式一 1 重构plugin AMap plugin AMap Object3DLayer AMap Object3D function nowStatus true 强制刷新后plugin并没有添加上 Object3DL

随机推荐

  • python如何制作地图热力图

    小白来学python如何制作地图热力图 图片可能看不太清楚 可以看我的知乎链接来源https zhuanlan zhihu com p 85824404 作为一个小白 最近花了好长时间研究如何制作热力图 终于做出来啦 过程如下 总体思路 收
  • spring mvc配置cas客户端

    1 在WEB INF lib中导入cas jar包 点击打开链接 2 导入证书 1 将证书server cer文件拷贝至业务系统所在服务器上的某路径下 如c盘根目录 在cmd命令界面切换至证书所在路径 执行以下命令 jdk路径自行修改 并信
  • 浅谈C++的sort函数用法

    目录 sort简介 一 默认排序 二 参数排序 三 自定义排序规则 四 排序字符数组 sort简介 头文件为algorithm 其排序方式类似于快速排序 比冒泡选择之类的小杂鱼高级 函数调用形式为 sort 参数a 参数b 参数c 参数a是
  • 华为OD机试真题-二元组个数【2023.Q1】

    题目描述 给定两个数组a b 若a i b j 则称 i j 为一个二元组 求在给定的两个数组中 二元组的个数 输入描述 第一行输入 m 第二行输入m个数 表示第一个数组 第三行输入 n 第四行输入n个数 表示第二个数组 输出描述 二元组个
  • Python利用情感词典做情感分析

    情感分析是大数据时代常见的一种分析方法 多用于对产品评论的情感挖掘 以探究顾客的满意度程度 在做情感分析时 有两种途径 一种是基于情感词典的分析方法 一种是基于机器学习的方法 两者各有利弊 在此 笔者主要想跟大家分享基于python平台利用
  • 区块链发展面临三大挑战

    区块链技术最近几年在世界范围一直是个热门话题 这种 热 源自于区块链的确是有很多优势的技术 它呈现出美好的前景 但同时也因为区块链发展会带来非常大的挑战 而且这种挑战可以说是历史性的 那么区块链会带来哪些挑战呢 我觉得主要有以下三个方面 第
  • 基于Qt的OpenGL编程(3.x以上GLSL可编程管线版)---(十六)实例化

    Vries的原教程地址如下 https learnopengl cn github io 04 20Advanced 20OpenGL 10 20Instancing 关于实例化的详细设置介绍与设置与参数设置请查看这个教程 本篇旨在对Vir
  • C++的嵌套依赖别名(typename的用法)

    看了很多遍 还是记录一下 1 在模板声明时typename和class是等价的 template
  • PyTorch训练时准确率不变

    今天复现了文章中的一个模型 刚开始学习率lr 0 01 准确率总是为20 分类目标有5个类 基本不变 刚开始我以为给模型的数据传错了 或者模型的处理有那个步骤有问题 最终多次尝试后 发现把学习率降低 结果就有效了 如我把学习率降低为lr 0
  • 我所钟爱的电影之二-公路片

    我爱公路片 人生只不过一次流浪 命运之途中 沿途风景或许都会遗忘 咫尺和遥远或许就在一瞬间 逝去的我们会怀念 一辈子就是活着的每一天 也许我不能环游世界 但幸好这个世界上有电影可以带我去 不管出走的初衷为何 在途中我们都会遇见爱 只因我们在
  • Selenium六 find_element_by_xpath()的几种方法

    Xpath XML Path Language 是W3C定义的用来在XML文档中选择节点的语言 一 从根目录 开始 有点像Linux的文件查看 代表根目录 一级一级的查找 直接子节点 相当于css selector中的 gt 号 html
  • SpringCloudAlibaba - Seata (2) AT 模式源码分析

    seata AT 模式的业务零侵入性 依靠的就是自动装配 starter 包 1 如何开启的全局事务 实现核心为 SeataAutoConfiguration 注入的 GlobalTransactionScanner Conditional
  • Qt 开发应用--颜色选择器ColorCopy

    Qt 开发应用 颜色选择器ColorCopy Qt颜色选择器 提供10大类100种颜色可选 点击即为复制 随处 Ctrl V 粘贴使用 提供有 Red Pink Purple Indigo Blue Green Yellow Orange
  • 进程和线程以及协程

    1 基本概念 进程和线程 进程 是系统资源分配的基本单位 实现了操作系统的并发 线程 是CPU调度的基本单位 实现了进程内的并发执行 并发是把任务在不同的时间点交给处理器进行处理 在同一时间点 任务并不会同时运行 并行是把每一个任务分配给每
  • 个人经济学管理tips

    摘录一些观点 作为茶余饭后的谈资 不清楚自己的热爱和目标时 每天把头脑最清醒的1小时留给自己 学习 思考 3个小时陪伴家人 剩下的时间 谁给钱多就给谁干 一居室好过养老年金险 房产保值升值 租金跑得赢通胀 一套刚需 一套改善 一套投资 三套
  • Win10系统下编译FFmpeg

    1 使用git下载源码 git clone git source ffmpeg org ffmpeg git ffmpeg 2 FFmpeg在windows平台编译需要使用MinGW w64来编译 单独使用MinGW w64比较麻烦 推荐使
  • pip镜像安装 python 安装库

    pip install openpyxl i https mirrors aliyun com pypi simple pip 本身更新 pip install upgrade pip vvv 上面是阿里云的 我用了特别快 语法 安装pip
  • 专利情况的基本了解

    专利 目标专利的拆解 提前关键词 构建检索式 适当的进行补充检 拆解已有技术的技术特征 申请书 说明书 权利要求 摘要 附图 优先权请求 发明 实用新型和外观设计 发明专利 实用新型专利和外观设计专利 发明专利 针对产品 方法或者产品 方法
  • c语言中两个有序数组合并,C语言算法:有序数组合并-2020-08-21

    方法 就是同时遍历两个数组 通过比大小 组成一个新数组 数组参数最好带上一个长度参数 防止越界 代码 合并数组 其中a b都是从小到大有序排列的数组 void mergeList int a int aLen int b int bLen
  • 高德地图api 地理编码(地址-->坐标)geocoder.getLocation在官方可以测试出结果,下载代码到本地却用不了 问题解决

    问题 高德地图api 地理编码 地址 gt 坐标 功能 通过输入 地址信息 得到 经纬度信息 geocoder getLocation在官方可以测试出结果 下载代码到本地却用不了 官方示例测试 可以从地址得到坐标 下载官方代码本地运行却出不