这里给大家演示只显示北京区域的地图,其他地区不显示。
一、注册高德账号
注册好账号后,登录点击进入“我的应用”,创建应用,获取key。
二、引入文件
注意引入 高德组件库时,将账号中“我的应用”获取的key,替换掉代码中的“高德应用key”,否则有些数据会获取不到。
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示北京市</title>
<style>
*, #container{ margin:0; padding: 0; width: 100%;height: 100%}
</style>
</head>
<body>
<div id="container"></div>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=高德应用key&plugin=AMap.DistrictSearch"></script>
</body>
</html>
这里使用多个插件,可以plugin后成以逗号形式追加,如下:
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=高德应用key&plugin=AMap.MarkerClusterer,AMap.DistrictSearch"></script>
三、完整代码
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示北京市</title>
<style>
*, #container{ margin:0; padding: 0; width: 100%;height: 100%}
</style>
</head>
<body>
<div id="container"></div>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=高德应用key&plugin=AMap.DistrictSearch"></script>
<script language="javascript">
var options = {
subdistrict: 0,
extensions: 'all',
level: 'province'
};
var district = new AMap.DistrictSearch(options);
//查询北京市区域
district.search('北京市', function(status, result) {
var bounds = result.districtList[0]['boundaries'];
var mask = [];
for(var i =0;i<bounds.length;i++){
mask.push([bounds[i]]);
}
//实例化地图
var map = new AMap.Map('container', {
mask: mask,
zoom: 10, //设置当前显示级别
expandZoomRange:true, //开启显示范围设置
zooms: [7, 20], //最小显示级别为7,最大显示级别为20
center: [116.43, 39.92],
viewMode: '3D', //这里特别注意,设置为3D则其它地区不显示
zoomEnable: true, //是否可以缩放地图
resizeEnable: true,
mapStyle: "amap://styles/light"
});
//添加描边
for(var i =0;i<bounds.length;i++){
new AMap.Polyline({
path:bounds[i],
strokeColor:'#3078AC',
strokeWeight:2,
map:map
})
}
});
</script>
</body>
</html>
如上代码,expandZoomRange和zooms使用,可固定地图在指定地区显示范围。
是否显示指定区域以外内容,可通过viewMode进行控制,设置为3D则不显示指定地区以外部分。