《高德地图开放平台 JS API 实战：展示地图与图层的奇妙之旅》
引言
嘿，各位开发者小伙伴们！今天咱要一起深入探索高德地图开放平台的 JS API 中那超有趣的地图展示和图层展示板块啦！准备好跟我一起开启这场神奇的地图之旅了吗？
效果展示
展示地图
准备
点击官网
- 1、没有账号进行注册，有则直接登录。
- 2、在首页点击控制台，点击左侧的应用管理–>我的应用–>点击右上角的创建新应用–>点击添加key
我们先编写一个HTML页面的基础结构，要展示地图我们得提供一个容器，这里以div节点作为地图容器（若是使用其他DOM节点需要display:block）同时为该容器指定，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,AMAPI</title>
</head>
<style>
html,
body{
width: 100%;
height: 100%;
padding: 0;
}
/*通过css为地图容器指定高度、宽度*/
#container{
width: 1000px;
height: 560px;
/* 水平居中 */
margin: auto;
}
</style>
<body>
<div id="container"></div>
</body>
</html>
加载JS API
接下来，就是让高德地图 “闪亮登场” 的时候啦！就像请明星出场一样，我们得给它一个 “邀请函”。
注： 这里的_AMapSecurityConfig与securityJsCode名字可自定义。
地图级别（
zoom）与地图的比例尺成正比，每增大一级，地图的比例尺也增大一倍，地图显示的越详细。Web地图的最小级别通常为3级，最大级别各家略有不同，高德地图 JS API 目前最大级别为 20 级。
<script type="text/javascript">
window._AMapSecurityConfig={
//你申请的安全密钥
securityJsCode:"c6361ead7a92a2a40377773cf05fecd7"
};
</script>
<!-- 加载JS API脚本 -->
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
var map=undefined; //地图对象
var traffic=undefined; //交通路况图层对象
console.log(AMapLoader)
AMapLoader.load({
key:"bc07049f7203a977f9a9723454ab9d64", //申请好的web端开发者key，调用load时必填
// version:"2.0" 指定要加载的JS API版本，缺省值为 1.4.15
}).then(AMap=>{
//JS API加载完成
}).catch(e=>{
console.log(e)
})
</script>
这里还有一种加载方式哦，更简单粗暴如下所示。(更多的加载方式)：
<script src="https://webapi.amap.com/maps?v=2.0&key=你申请的值"></script>
地图初始化
现在，高德地图已经准备就绪，让我们来给它 “打扮打扮”，设置一下它的初始状态。
在then的回调函数中编写如下代码（传入地图中心坐标和地图级别）：
map=new AMap.Map("container",{
viewMode:'2D', //地图模式 默认使用2D模式
zoom:11, //地图级别
center:[116.397428,39.90923], //地图中心点 这里以北京天安门的经纬度为例
mapStyle:"amap://styles/normal", //地图样式 normal
})
高德地图还有好多官方主题样式可供选择呢，就像一个百宝箱，让你的地图独一无二！
官方主题样式：
| 主题预览表 |
|---|
 |
地图初始化【AMap.Map】所涉及的属性及方法说明
| 参数/方法 | 说明 | 类型 | 参数值描述 |
|---|---|---|---|
| zoom | 初始化地图层级，值越大放大比例越大 | Number | 可以设置为整数或浮点数（一位） |
| center | 初始化地图中心点 | Array | 地图重点的经纬度 |
| mapStyle | 设置地图的显示样式 | String | 支持两种地图样式： 1、自定义地图样式如：amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86。 2、官方样式模版，如： amap://styles/normal amap://styles/grey amap://styles/whitesmoke amap://styles/dark amap://styles/light amap://styles/graffiti 使用官方地图样式教程 |
展示图层
高德地图的图层就像一层一层的 “魔法滤镜”，能让你的地图更加丰富多彩。
JS API支持官方图层、三方图层、数据图层等。
本篇文章以添加官方图层：实时交通图层AMap.TileLayer.Traffic为例。
创建图层
const layer=new AMap.TileLayer({
zooms:[3,20], //可见级别
visible:true,//是否可见
opacity:1, //透明度
zIndex:0 //叠加层级
})
加载图层
map=new AMap.Map("container",{
viewMode:'2D', //地图模式 默认使用2D模式
zoom:11, //地图级别
center:[116.397428,39.90923], //地图中心点 这里以北京故宫的经纬度为例
mapStyle:"amap://styles/normal", //地图样式 normal
layer:[layer], //layer为创建的默认图层
})
若在初始化地图时只需要默认图层，则layers属性可以缺省。
创建实时交通路况图层
添加图层使用map.add(traffic),移除路况图层：map.remove(traffic).更多图层前往高德地图官方图层
traffic=new AMap.TileLayer.Traffic({
autoRefresh:true, //是否自动刷新
interval:180 //刷新间隔时间 单位（s）秒 缺省值180
})
map.add(traffic) //添加图层
注 不同的颜色代表不同的拥堵程度，暗红色代表极度拥堵，绿色代表通畅，灰色代表路况不明。
路况图层的显示和隐藏
路况图层就像一个调皮的小精灵，有时出现，有时消失。
traffic.show()
traffic.hide()
完整代码
<!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,AMAPI</title>
</head>
<style>
html,
body{
width: 100%;
height: 100%;
inset: 0;
margin: 0;
padding: 0;
background-color:#000;
}
#container{
width: 1000px;
height: 560px;
/* 居中 */
margin:auto;
margin-top: 10%;
}
</style>
<body>
<div id="container"></div>
<!-- 地图样式改变按钮 -->
<select onchange="mapStyleChange()" id="mapStleSelection" value="normal">
<option value="normal" class="select-item">normal</option>
<option value="macaron" class="select-item">macaron</option>
<option value="graffiti" class="select-item">graffiti</option>
<option value="whitesmoke" class="select-item">whitesmoke</option>
<option value="dark" class="select-item">dark</option>
<option value="fresh" class="select-item">fresh</option>
<option value="darkblue" class="select-item">darkblue</option>
<option value="blue" class="select-item">blue</option>
<option value="light" class="select-item">light</option>
<option value="grey" class="select-item">grey</option>
</select>
<!-- 展示图层的控制 -->
<button onclick="hideTrafficLayer()">隐藏路况</button>
<button onclick="showTrafficLayer()">显示路况</button>
<button onclick="resetTrafficLayer()">重置图层</button>
</body>
<script type="text/javascript">
window._AMapSecurityConfig={
//你申请的安全密钥
securityJsCode:"c6361ead7a92a2a40377773cf05fecd7"
};
</script>
<!-- 加载JS API脚本 -->
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
var map=undefined; //地图对象
var traffic=undefined; //交通路况图层对象
console.log(AMapLoader)
AMapLoader.load({
key:"bc07049f7203a977f9a9723454ab9d64", //申请好的web端开发者key，调用load时必填
// version:"2.0" 指定要加载的JS API版本，缺省值为 1.4.15
}).then(AMap=>{
const layer=new AMap.TileLayer({
zooms:[3,20], //可见级别
visible:true,//是否可见
opacity:1, //透明度
zIndex:0 //叠加层级
})
map=new AMap.Map("container",{
viewMode:'2D', //地图模式 默认使用2D模式
zoom:11, //地图级别
center:[116.397428,39.90923], //地图中心点 这里以北京故宫的经纬度为例
mapStyle:"amap://styles/normal", //地图样式 normal
layer:[layer], //layer为创建的默认图层
})
traffic=new AMap.TileLayer.Traffic({
autoRefresh:true, //是否自动刷新
interval:180 //刷新间隔时间 单位（s）秒 缺省值180
})
map.add(traffic) //添加图层
}).catch(e=>{
console.log(e)
})
//地图样式切换处理函数
function mapStyleChange(){
const v=document.getElementById("mapStleSelection").value
map.setMapStyle("amap://styles/"+v)
}
//显示路况处理函数
function showTrafficLayer(){
traffic.show()
}
//隐藏路况处理函数
function hideTrafficLayer(){
traffic.hide()
}
//重置图层处理函数
function resetTrafficLayer(){
map.remove(traffic)
map.add(traffic)
}
</script>
</html>
参考文档：高德地图官方文档
扫一扫
1232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
