快速上手最后更新时间: 2023年05月15日

如果你想快速了解如何创建一个简单的地图应用，可以查看本文。

线上尝试 JS API

想要快速体验 JS API 的能力，你可以直接访问示例中心。
如果你想快速生成一个可使用的地图，你可以使用地图快速生成器。

准备工作

成为开发者并创建 key

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

第一个地图示例

本示例带你快速了解：地图、点标记、矢量图形、信息窗体、事件的最基本使用方法。

查看完整示例和代码

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>

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>

查看更多 JS API 加载方式

提示

为了避免你在开发中遇到有关 key 的报错，请务必正确的使用 key 和安全密钥

添加点标记 Marker

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

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

查看更多点标记 Marker 类型

为点标记 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 事件

查看更多信息窗体 InfoWindow 信息

添加折线 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);

查看更多折线