返回顶部
首页 > 资讯 > 移动开发 >申请高德地图API【流程记录】
  • 883
分享到

申请高德地图API【流程记录】

小程序高德地图api 2023-09-17 09:09:54 883人浏览 独家记忆
摘要

问题描述 现在我们需要使用高德地图的api进行功能的实现,这就需要我们申请一个高德地图的key 操作过程 1.进入官网 登录账号 点击高德开放平台 | 高德地图API (amap.com)。进行登录

问题描述

现在我们需要使用高德地图的api进行功能的实现,这就需要我们申请一个高德地图的key

操作过程

1.进入官网

登录账号

点击高德开放平台 | 高德地图API (amap.com)。进行登录

请添加图片描述

选择控制台

请添加图片描述

注册为开发者

请添加图片描述

填写邮箱获取验证码后,进行支付宝扫码进行实名认证

请添加图片描述

注册完成

请添加图片描述

请添加图片描述

点击确认即可

2.申请key

点击左侧的应用管理->我的应用进行创建

请添加图片描述

点击右上角的创建新应用进行创建

新建应用

请添加图片描述

添加key

点击刚才创建的名称,点击添加

请添加图片描述

请添加图片描述

OK,这样就完成创建了

请添加图片描述

3.使用高德地图api

在高德地图中随便找一个实例进行测试,直接复制代码运行

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://cache.amap.com/lbs/static/main1119.CSS" />    <script type="text/javascript">        window._AMapSecurityConfig = {            securityjsCode: 'dbef9a465dab5edcabe2df8f41bfd0fb',        }    script>    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=39142dedbd08b778cb7d21d7b2d72ff4">script>head><body>    <div id="container">div>    <div id="myPageTop">        <table>            <tr>                <td>                    <label>请输入关键字:label>                td>            tr>            <tr>                <td>                    <input id="tipinput" />                td>            tr>        table>    div>    <script type="text/javascript">        //地图加载        var map = new AMap.Map("container", {            resizeEnable: true        });        //输入提示        var autoOptions = {            input: "tipinput"        };        AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() {            var auto = new AMap.AutoComplete(autoOptions);            var placeSearch = new AMap.PlaceSearch({                map: map            }); //构造地点查询类            auto.on("select", select); //注册监听,当选中某条记录时会触发            function select(e) {                placeSearch.setCity(e.poi.adcode);                placeSearch.search(e.poi.name); //关键字查询查询            }        });    script>body>html>

使用方法一:JSAPI key搭配静态安全密钥以明文设置(不安全,建议开发环境用)

添加密钥
在最前方添加密钥

<script type="text/javascript">        window._AMapSecurityConfig = {            securityJsCode: '输入你的安全密钥',        }    script>

在这里插入图片描述
添加key
在对应复制的代码中填写即可

使用方法二:JSAPI key搭配代理服务器并携带安全密钥转发(安全)

详情见:准备-入门-教程-地图 JS API | 高德地图API (amap.com)

实现效果
在这里插入图片描述

来源地址:https://blog.csdn.net/qq_22841387/article/details/127221064

--结束END--

本文标题: 申请高德地图API【流程记录】

本文链接: https://lsjlt.com/news/410906.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作