1、需求:仅展示某一区域的地图,如中国地图或省份地图等。
2、首先引入高德地图,引入方法可看我的上一篇博客。(此时引入的是全球地图,并不满足需求)
3、这时候就需要使用高德开放平台的行政区查询插件了。
4、引入插件AMap.plugin(写在AMapLoader.load的.then方法中)
AMapLoader.load({
key: "key的值", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ["AMap.Scale", "AMap.DistrictSearch"], //需要使用的的插件列表,如比例尺'AMap.Scale',支持添加多个如:['...','...']
})
.then((AMap) => {
const mask = [];
//引入插件,此示例采用异步引入,更多引入方式 https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins
AMap.plugin("AMap.DistrictSearch", function () {
})
.catch((e) => {
console.log(e);
});
5、绘制行政区划边界(此时也只是在全球地图中绘制了合肥市的行政区域,其他非合肥市区域依旧可以看见,还需接着处理)。
//引入插件,此示例采用异步引入,更多引入方式 https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins
AMap.plugin("AMap.DistrictSearch", function () {
var district = new AMap.DistrictSearch({
extensions: "all", //返回行政区边界坐标等具体信息
level: "district", //设置查询行政区级别为区
});
district.search("合肥市", function (status, result) {
var bounds = result.districtList[0].boundaries; //获取合肥市的边界信息
if (bounds) {
for (var i = 0; i < bounds.length; i++) {
//生成行政区划 polygon
var polygon = new AMap.Polygon({
map: map, //显示该覆盖物的地图对象
strokeWeight: 1, //轮廓线宽度
path: bounds[i], //多边形轮廓线的节点坐标数组
fillOpacity: 0.2, //多边形填充透明度
fillColor: "#CCF3FF", //多边形填充颜色
strokeColor: "#CC66CC", //线条颜色
});
}
map.setFitView(); //将覆盖物调整到合适视野
}
});
});
6、配置地图属性及显示区域数据。
AMapLoader.load({
key: "key的值", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ["AMap.Scale", "AMap.DistrictSearch"], //需要使用的的插件列表,如比例尺'AMap.Scale',支持添加多个如:['...','...']
})
.then((AMap) => {
//创建mask空数组用来接收查询回来的指定区域数据
const mask = [];
//引入插件,此示例采用异步引入,更多引入方式 https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins
AMap.plugin("AMap.DistrictSearch", function () {
var district = new AMap.DistrictSearch({
extensions: "all", //返回行政区边界坐标等具体信息
level: "district", //设置查询行政区级别为区
});
district.search("合肥市", function (status, result) {
var bounds = result.districtList[0].boundaries; //获取合肥市的边界信息
if (bounds) {
for (var i = 0; i < bounds.length; i++) {
//存储获取到的所有指定区域的数据
mask.push([bounds[i]]);
//生成行政区划 polygon
var polygon = new AMap.Polygon({
map: map, //显示该覆盖物的地图对象
strokeWeight: 1, //轮廓线宽度
path: bounds[i], //多边形轮廓线的节点坐标数组
fillOpacity: 0.2, //多边形填充透明度
fillColor: "#CCF3FF", //多边形填充颜色
strokeColor: "#CC66CC", //线条颜色
});
}
map.setFitView(); //将覆盖物调整到合适视野
}
});
});
// 配置地图属性及指定区域数据
var map = new AMap.Map("container", {
// mask的位置也会影响指定范围内的地图是否显示
mask: mask,
mapStyle: "amap://styles/normal", //设置地图的显示样式
zoom: 10, // 设置当前显示级别
expandZoomRange: true, // 开启显示范围设置
zooms: [7, 20], //最小显示级别为7,最大显示级别为20
viewMode: "3D", // 特别注意,设置为3D则其他地区不显示
zoomEnable: true, // 是否可以缩放地图
});
})
.catch((e) => {
console.log(e);
});
7、此时,一个只有合肥市的地图就写好了,效果图如下:
8、但此时还有个问题,一旦刷新之后,地图就不显示了。这个问题下章更新