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

试一试

下载完整代码

本章教程将介绍如何在你的页面上创建一个地图，介绍地图的基本操作，如何更改地址展示的主题。

准备

成为开发者并创建 key

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

地图

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标签内添加viewport meta标签，以达到最佳的绘制性能

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

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

#container {width:300px; height: 180px; }

加载JS API

推荐使用JSAPI 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)=>{
    // JS API加载完成后获取AMap对象
  })
</script>

提示

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

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

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

创建地图对象

一张地图包括：基本的地图图层以及数据图层，你可以传入地图中心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>标签加载后获取。

给地图设置个主题

如果你想做出独特的地图样式，可以使用更改地图渲染的样式，可以使用官方地图样式，也可以使用GeoHUB自定义地图平台创建独一无二的样式。

只需要在上一步创建地图对象的时候传入mapStyle即可设置地图样式。

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

提示

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