java js 高德api_准备-入门-教程-地图 JS API | 高德地图API

ゝ一世哀愁。 2022-11-12 02:33 279阅读 0赞

本章介绍使用高德地图 JS API 开发地图应用之前的一些准备工作。

注册账号并申请Key

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI )」

准备页面

1.在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

2.添加div标签作为地图容器，同时为该div指定id属性；

3.为地图容器指定高度、宽度；

\#container \{width:300px; height: 180px; \}

4.进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

5.在完成如上准备工作之后便可以开始进行开发工作了，查看快速入门。

异步加载 JS API

上一节说明的是最基本的同步加载 JS API 的方式，如果您需要异步加载，比如通过appendChild，或者通过require等异步方式来加载，这时需要您需要先准备一个全局的回调函数作为 JS API 异步加载的回调函数，并将其函数名作为callback参数添加在 JS API 的引用地址后面，此时要注意，回调函数应该在脚本请求发出之前进行声明。异步加载方式只有在回调之后，才能开始调用JSAPI的相关接口。比如

window.onLoad = function()\{

var map = new AMap.Map('container');

\}

var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';

var jsapi = doc.createElement('script');

jsapi.charset = 'utf-8';

jsapi.src = url;

document.head.appendChild(jsapi);

更多的加载方式，请查看「JS API 的加载」

HTTPS 的支持

JSAPI 1.3 开始完全支持 HTTPS 协议，如需使用安全协议，替换 JS API 的入口脚本URL中的http为https即可。随着 Chrome、iOS 等相继限制非安全域的定位请求，我们建议您升级网站到HTTPS协议，并使用HTTPS协议加载 JS API。

相关文档

发表评论取消回复

表情：

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

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

相关阅读

相关 java js 高德api_准备-入门-教程-地图 JS API | 高德地图API

本章介绍使用高德地图 JS API 开发地图应用之前的一些准备工作。注册账号并申请Key 1. 首先，注册开发者账号，成为高德开放平台开发者 2. 登陆之后，在进入「应

ゝ一世哀愁。/ 2022年11月12日 02:33/ 0 赞/ 280 阅读

相关 android 地铁地图api,入门指南-地铁图 JS API | 高德地图API

入门指南将带您迅速了解地铁图 JS API的基本使用，学习如何以easy模式创建地铁简易图，使您在最短时间内创建一个地铁图页面。准备页面在正式开始开发地图应用之前,您需

r囧r小猫/ 2022年10月16日 07:37/ 0 赞/ 336 阅读

相关 c语言获取高德地图api数据,获取搜索数据-POI搜索-示例中心-JS API 示例 | 高德地图API...

html, body, \container \{ width: 100%; height: 100%; \} 获取搜索信息搜索结果展示 // 初始化地图

女爷i/ 2022年10月15日 00:51/ 0 赞/ 205 阅读

相关 JS的高德API封装

function MapUtil() { var map = null; var geolocation = null; var geoc

喜欢ヅ旅行/ 2022年07月16日 01:13/ 0 赞/ 218 阅读

相关使用高德地图api实现web端查看地图轨迹

一实现效果：存入数据库的地址经纬度在地图上查看轨迹。 ![Center][] 可放大缩小查看详细地址： ![Center 1][]

末蓝、/ 2022年06月08日 10:18/ 0 赞/ 284 阅读

相关高德地图API的简单使用

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

港控/mmm°/ 2022年06月03日 09:45/ 0 赞/ 424 阅读

相关微信小程序---高德地图API

本文章介绍微信小程序调用高德地图API的过程，使用高德定位功能做演示。微信小程序目前支持百度地图、高德地图、腾讯地图。用法可以说是基本完全一样，本文章以高德为例，简

今天药忘吃喽~/ 2022年04月13日 11:15/ 0 赞/ 2992 阅读

相关高德地图 Javascript API 入门（七）

高德地图 Javascript API 入门（七）热力图插件简单例子 // 显示地图 var map=new AMap.Map("cont

悠悠/ 2022年02月23日 12:13/ 0 赞/ 407 阅读

相关高德地图API使用笔记

最近公司项目需要用到高德地图绘制路径回放功能，在这里做下笔记记录一下。首先需要加载地图库文件 // key对应为你申请的key <script

港控/mmm°/ 2021年12月23日 12:01/ 0 赞/ 523 阅读

相关【高德地图API】从零开始学高德JS API ——地址解析与逆地址解析

摘要：无论是百度LBS开放平台，还是高德LBS开放平台，其调用量最高的接口，必然是定位，其次就是地址解析了，又称为地理编码。地址解析，就是将地址转换为经纬度。而逆地址解析，就是

「爱情、让人受尽委屈。」/ 2021年07月27日 02:14/ 0 赞/ 491 阅读