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

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

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

准备

成为开发者并创建 key

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

地图

1

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; }  
2

加载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>
3

创建地图对象

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

4

给地图设置个主题

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

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

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

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

示例
中心
常见
问题
智能
客服