js如何引入高德地图API？
准备
成为开发者并创建 key
1、登录控制台
登录 高德开放平台控制台，如果没有开发者账号，请 注册开发者。
2、创建 key
进入应用管理，创建新应用，新应用中添加 key，服务平台选择 Web端(JS API)。
3、获取 key 和密钥
创建成功后，可获取 key 和安全密钥。
快速上手
1、HTML 页面准备
编写 HTML 页面的基本结构代码，需要一个节点来承载地图，本教程中使用 <div id="container"></div>，id 可以自定义。
<!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>HELLO，AMAP!</title>
<style>
html, body, #container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>2、JS API 的加载和地图初始化
使用 JS API Loader 加载，写入在 控制台 申请的 key 和安全密钥。
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:"「您申请的安全密钥」",
}
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript" >
AMapLoader.load({
key: "「您申请的应用Key」", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
}).then((AMap)=>{
const map = new AMap.Map('container');
}).catch((e)=>{
console.error(e); //加载错误提示
});
</script>3、添加点标记 Marker
JS API 提供了在地图之上绘制覆盖物的能力，现在我们添加add()一个默认的点标记Marker。
const marker = new AMap.Marker({
position:[116.39, 39.9] //位置
})
map.add(marker); //添加到地图4、为点标记 Marker 添加事件，并唤起信息窗体 InfoWindow
JS API 提供的 Map、点标记、矢量图形等实例均支持事件绑定，鼠标、触摸板操作均会触发相应的事件。我们通过给点标记绑定click()事件来添加信息窗体InfoWindow。
// 创建信息窗体
const infoWindow = new AMap.InfoWindow({
isCustom: true, // 使用自定义窗体
content: '<div>HELLO,AMAP!</div>', // 信息窗体的内容可以是任意 html 片段
offset: new AMap.Pixel(16, -45)
});
const onMarkerClick = function(e) {
infoWindow.open(map, e.target.getPosition()); // 打开信息窗体
// e.target 就是被点击的 Marker
}
const marker = new AMap.Marker({
position: [116.481181, 39.989792]
})
map.add(marker);
marker.on('click', onMarkerClick); // 绑定 click 事件js如何引入高德地图API？的更多相关文章
- 【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘
原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...
- 【高德地图API】从零开始学高德JS API（八）——地址解析与逆地址解析
原文:[高德地图API]从零开始学高德JS API(八)——地址解析与逆地址解析 摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理 ...
- 【高德地图API】从零开始学高德JS API（六）——坐标转换
原文:[高德地图API]从零开始学高德JS API(六)——坐标转换 摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case.我们还提供,如何将基站cell_id转换为GPS坐标? --- ...
- 【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行
原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...
- 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...
- 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...
- 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
- 【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图
原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...
- JS框架_(JQuery.js)高德地图api
百度云盘 传送门 密码 :ko30 高德地图api效果 <!doctype html> <html> <head> <meta charset="u ...
- web开发如何使用高德地图API（四）通过AMap.Marker自定义标点
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
随机推荐
- 通过前端导出excel表格
1. 在前端HTML上绘制想要导出的表格(包含后端获取的数据) <div class="exportExcel" id="exportOutTable" ...
- Hadoop 从 hdfs 中拷出文件权限不够
问题:使用-get命令从hdfs中拷出文件时,提示权限不够,如下: 分析: 可能有三方面原因: hdfs 中的文件或文件夹 没有读取权限: hdfs 的配置中未允许拷出文件: linux 文件夹没有写 ...
- 用反证法说明List<Object>和List<String>不存在子父类关系可行吗？
看宋红康老师的Java基础视频讲解,视频中用反证法证明List
- 前端复习之jQuery大全
Jquery知识点梳理 梳理图摘自--https://www.cnblogs.com/859630097com/p/14433611.html [手机版]横屏观看,效果更佳 JavaScript类库: ...
- Eclipse's Import error and remove
1.导入项目之前,请确认工作空间编码已设置为utf-8:window->Preferences->General->Wrokspace->Text file encoding- ...
- linux 数据卷磁盘管理
新加磁盘如何创建逻辑分区 查看命令 lvs vgs pvs 1: 新建一个分区(partition)fdisk /dev/sdb 2:创建PV(物理卷)pvcreate /dev/sdb1pvs或 ...
- Hive启动留下的RunJar进程不能使用Kill -9 杀不掉怎么办？
1.问题示例 [Hadoop@master Logs]$ jps 3728 ResourceManager 6976 RunJar 7587 Jps 4277 Master 3095 NameNode ...
- 视频播放-videojs
视频播放-video-js组件 安装 yarn add video.js --save npm install video.js --save 代码 import React, { useEffect ...
- Serverless 遇到 FinOps: Economical Serverless
Serverless 遇到 FinOps: Economical Serverless 摘要:本文基于 FunctionGraph 在 Serverless 领域的 FinOps 探索和实践,提出业界 ...
- unidbgrid导出Excel到多个sheet
xls := TXlsFile.Create(true); xls.NewFile; xls.ActiveSheet := 1; xls.SheetName := '未自评人员清单'; xls.Act ...