开发 地图 JS API 2.0 入门教程 展示地图

展示地图 最后更新时间: 2023年12月04日

本文介绍如何使用 JS API 创建一个地图,开发者可以根据需要设置地图样式。

默认地图示例

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>
提示

如果是移动端开发,请在<head>标签内添加<meta>标签并设置name属性为"viewport",以达到最佳的绘制性能。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

通过 css 为地图容器指定高度、宽度。

#container {
  width: 300px;
  height: 180px;
} 
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) => {
      //JS API 加载完成后获取AMap对象
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
</script>

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

提示

本章头部的示例使用的是<script>标签加载的 JS API 脚本。

<script src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值"></script>
4

1.4 地图初始化

地图初始化需要设置基本的地图图层,你可以传入地图中心点经纬度(center)和地图初始展示级别(zoom)来展示你想要的区域范围。本例展示北京以天安门为中心的11级地图视野。

const map = new AMap.Map("container", {
  viewMode: '2D', //默认使用 2D 模式
  zoom: 11, //地图级别
  center: [116.397428, 39.90923], //地图中心点
});
提示

viewMode 是地图渲染的模式,'2D':平面模式,'3D':带有俯仰角的 3D 模式

注意

初始化前需要获得AMap对象,创建地图实例的代码写在Loader.then((AMap)=>{})中或者<script>标签加载后。

5

1.5 主题样式

如果你想更改地图的样式,只需要在上一步创建地图对象的时候传入mapStyle即可设置地图样式。你可以使用官方地图样式,也可以使用 GeoHUB 自定义地图平台 创建自定义样式。

提示

官方主题样式

map = new AMap.Map("container", {
  mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
});

也可以使用 map.setMapStyle('amap://styles/whitesmoke')来动态的设置地图样式。

至此,你已经成功使用 JS API 2.0展示了一个简单的地图。你可以根据自己的需求,进一步探索和使用 JS API 2.0的其他功能,例如:添加图层添加点标记 等。

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

2.1 AMap.Map

参数/方法

说明

类型 

参数值描述 

zoom

初始化地图层级,值越大放大比例越大

Number

可以设置为整数或浮点数(一位)

center

初始化地图中心点

Array

地图中心点的经纬度

mapStyle

设置地图的显示样式

String

目前支持两种地图样式:

第一种:自定义地图样式,如:amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86 可前往教程 使用官方地图样式

第二种:官方样式模版,如:

  • amap://styles/normal
  • amap://styles/grey
  • amap://styles/whitesmoke
  • amap://styles/dark
  • amap://styles/light
  • amap://styles/graffiti等,查看 标准主题示例

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