展示地图 最后更新时间: 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') 来动态的设置地图样式。