开发 地图 JS API 2.0 快速上手

快速上手 最后更新时间: 2023年12月04日

本文介绍如何创建 key 和开发一个简单的地图应用。

第一个地图示例

1、实现步骤

1

1.1 准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

提示

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

2

1.2 HTML 页面准备

编写 HTML 页面的基本的结构代码,需要一个<div>节点作为地图容器,同时为此<div>指定id属性,本教程中使用 <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>
3

1.3 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", //指定要加载的 JS API 的版本,缺省时默认为 1.4.15
  })
    .then((AMap) => {
      const map = new AMap.Map("container");
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
</script>

本示例使用 JS API Loader 进行加载,查看更多 api 加载方式

提示

为了避免你在开发中遇到有关 key 的报错,请务必正确的使用 key 和安全密钥,详见 准备 教程。

4

1.4 为地图点标记 Marker

JS API 提供了在地图之上绘制覆盖物的能力,现在我们使用add()方法添加一个默认的点标记Marker

const marker = new AMap.Marker({
  position: [116.39, 39.9], //位置
});
map.add(marker); //添加到地图

代码需添加.then((AMap)=>{})中,即:AMap 对象可以取到后执行,同理后边步骤的代码都有此要求。

5

1.5 为点标记 Marker 添加事件,并唤起信息窗体 InfoWindow

JS API 提供的 Map、点标记、矢量图形的实例均支持事件,鼠标或者触摸操作均会触发相应的事件。我们通过给点标记绑定click事件,通过添加信息窗体InfoWindow来处理click的回调事件。

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事件
6

1.6 为地图添加折线 Polyline

像点标记一样,通过add()方法向地图添加折线Polyline

const lineArr = [
  [116.368904, 39.913423],
  [116.382122, 39.901176],
  [116.387271, 39.912501],
  [116.398258, 39.904600]
];
const polyline = new AMap.Polyline({
  path: lineArr, //设置线覆盖物路径
  strokeColor: "#3366FF", //线颜色
  strokeWeight: 5, //线宽
  strokeStyle: "solid", //线样式
});
map.add(polyline);

2、线上尝试JS API

高德 JS API 2.0 提供了丰富的功能和应用场景,开发人员可以根据自己的需求,灵活运用这些功能来创建各种类型的地图应用。

3、本章涉及的属性及方法说明

3.1 AMap.Marker

参数/方法

说明

类型 

默认值

position

点标记的位置信息

Array

-

offset

相对于基点的偏移位置

Array

[0,0]

3.2 AMap.InfoWindow

参数/方法

说明

类型 

默认值

position

信息窗体的位置信息

Array

-

isCustom

使用自定义窗体

Boolean

false

content

信息窗体的内容可以是任意 html 片段

String

-

offset

相对于基点的偏移位置

Array

[0,0]

3.3 AMap.Polyline

参数/方法

说明

类型 

参数值描述

默认值

path

设置线覆盖物路径

Array

-

-

strokeColor

线颜色,使用16进制颜色代码赋值

String

使用16进制颜色代码赋值

#00D3FC

strokeWeight

线宽

Number

-

2

strokeStyle

线样式

String

实线: solid

虚线:  dashed

-

返回顶部 示例中心 常见问题 智能客服 公众号
二维码