准备

成为开发者并创建 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？的更多相关文章

  1. 【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘

    原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...

  2. 【高德地图API】从零开始学高德JS API（八）——地址解析与逆地址解析

    原文:[高德地图API]从零开始学高德JS API(八)——地址解析与逆地址解析 摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理 ...

  3. 【高德地图API】从零开始学高德JS API（六）——坐标转换

    原文:[高德地图API]从零开始学高德JS API(六)——坐标转换 摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case.我们还提供,如何将基站cell_id转换为GPS坐标? --- ...

  4. 【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行

    原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...

  5. 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  6. 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  7. 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  8. 【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图

    原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...

  9. JS框架_(JQuery.js)高德地图api

    百度云盘 传送门 密码 :ko30 高德地图api效果 <!doctype html> <html> <head> <meta charset="u ...

  10. web开发如何使用高德地图API（四）通过AMap.Marker自定义标点

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

随机推荐

  1. 5.3dmax轴相关

    # 知识点: 转换为可编辑的样条线(spline) chamfer 切角 Fillet 圆角 车削命令 书柜案例2 样条线(从图形到多边形) 1.在平面视图中选择矩形并创建一个矩形,将矩形转化为可编辑 ...

  2. linux离线安装插件包

    1.下载插件包(联网的linux环境下) # 检查是否安装了vim(vim-minimal是vi) [root@localhost opt]# rpm -qa | grep vim vim-minim ...

  3. jquery 选择器 或 且

    jquery选择器具有很强大的功能,基本的使用方法随处可见,jquery还提供了更为方便的使用. 且:$("div[id^='AAA_']div[id$='_DIV']"),此选择 ...

  4. 关于Electron环境配置与一些相关的错误解决

    安装步骤: 1.安装NVM: 这个是nodejs的版本管理器,github上有一个nvm for windows,由于不能的nodejs的版本问题,可以自由进行切换. 下载地址:https://git ...

  5. js延迟加载、js异步加载

    1.js延迟加载 (1)js延迟加载是js性能优化的一种方式 (2)作用:为了提高网页的加载速度 (3)原理:等网页加载完成之后再加载js文件 ··需要优化的原因:HTML元素是按照其在页面中出现的次 ...

  6. 【BUUCTF】ACTF2020 新生赛Include1 write up

    查看源代码+抓包都没有发现什么信息,只有这两个东东 <meta charset="utf8"> Can you find out the flag? <meta ...

  7. MySQL：查询语句 case when then 的用法

    转载网址: https://blog.csdn.net/h123hlll/article/details/122366213

  8. Matlab笔记--Matlab基础

    Matlab基础 数据类型(共有15种数据类型) 整数 取整函数 浮点数(单精度浮点数和双精度浮点数--默认为双精度浮点数) 复数 数据的显示格式(format确定数据的显示格式): 数据格式经过改变 ...

  9. 关于两行代码让我时间无限拉长这件事------mainServlet

    在再一次尝试实现增删改查的功能时,出现了一些BUG,修改功能一直实现不了,查了好久的资料,这才发现问题 如上图所示,这个Servlet里面定义的方法,虽然很短,但是重要的很奥,改了好久都没注意到这个问 ...

  10. 在CentOS中安装和使用nginx

    概述 本文简单讲述一下,如何快速将一个内网的Web服务通过nginx提供给外网访问,并且启用HTTPS.例如我们部署了一个kubesphere,地址为192.168.202.151:30880,需要通 ...