1.实现效果如下
掩膜:可以将地图上的其他地方遮挡起来，然后只显示自己想展示的地方
话不多说上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="./images/global.css">
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=百度地图的密钥需要自己申请"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 地图容器 -->
<div id="container"></div>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("container"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(120.192361, 30.862274), 13); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// map.setMinZoom(13);
// map.setMaxZoom(20);
//这块都是添加地图响应的控件
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
// var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
// map.addControl(cityCtrl);
var bdary = new BMapGL.Boundary();
//掩膜重点就在代码这里，可以直接复制到你自己的项目中进行使用 ，只需要自己换一下绿色的目标地点
bdary.get('湖州市', function(rs) {
// 绘制行政区
for (var i = 0; i < rs.boundaries.length; i++) {
var path = [];
var xyArr = rs.boundaries[i].split(';');
var ptArr = [];
for (var j = 0; j < xyArr.length; j++) {
var tmp = xyArr[j].split(',');
var pt = new BMapGL.Point(tmp[0], tmp[1]);
ptArr.push(pt);
}
console.log(ptArr);
var mapmask = new BMapGL.MapMask(ptArr, {
isBuildingMask: true,
isPoiMask: true,
isMapMask: true,
showRegion: 'inside',
topFillColor: '#5679ea',
topFillOpacity: 0.5,
sideFillColor: '#5679ea',
sideFillOpacity: 0.9
});
map.addOverlay(mapmask);
var border = new BMapGL.Polyline(ptArr, {
strokeColor: '#4ca7a2',
strokeWeight: 3,
strokeOpacity: 1
});
map.addOverlay(border);
}
});
//这个数据是我自己模拟出来渲染点使用的
var dataList = [{
lng: '120.091405',
lat: '30.901617',
icon: './images/ywb.png',
name: '直属业务部窗口',
address: '金盖山路66号',
introduce: '银行（Bank），是依法成立的经营货币信贷业务的金融机构，是商品货币经济发展到一定阶段的产物。银行是金融机构之一，银行按类型分为：中央银行、政策性银行、商业银行、专营机构、投资银行、世界银行，它们的职责各不相同。',
tp: 'https://ts1.cn.mm.bing.net/th/id/R-C.cdfbcc62d0a5d084293b968e35aa9cd1?rik=5dVjWz2np2Bz/w&riu=http://pic.baike.soso.com/p/20140211/20140211095757-1093189800.jpg&ehk=mlOCuBhfi+4U7FnGdp1ZqGlhWW1kHrqhUguldL9RFYA=&risl=&pid=ImgRaw&r=0'
}, {
lng: '120.279127',
lat: '30.86632',
icon: './images/wd.png',
name: '织里便民中心',
address: '吴兴大道255号',
introduce: '银行（Bank），是依法成立的经营货币信贷业务的金融机构，是商品货币经济发展到一定阶段的产物。银行是金融机构之一，银行按类型分为：中央银行、政策性银行、商业银行、专营机构、投资银行、世界银行，它们的职责各不相同。',
tp: 'https://ts1.cn.mm.bing.net/th/id/R-C.cdfbcc62d0a5d084293b968e35aa9cd1?rik=5dVjWz2np2Bz/w&riu=http://pic.baike.soso.com/p/20140211/20140211095757-1093189800.jpg&ehk=mlOCuBhfi+4U7FnGdp1ZqGlhWW1kHrqhUguldL9RFYA=&risl=&pid=ImgRaw&r=0'
}]
//数据多的话可以直接采取遍历的方式直接渲染
dataList.forEach((item) => {
var point = new BMapGL.Point(item.lng, item.lat);
const myIcon = new BMapGL.Icon(item.icon, new BMapGL.Size(10, 10));
var marker = new BMapGL.Marker(point, {
icon: myIcon,
}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//下面这个配置是自定义点击点展开的窗口（）
var opts = {
width: 400, // 信息窗口宽度
height: 300, // 信息窗口高度
title: item.name // 信息窗口标题
}
var html = `<p>地址：${item.address}</p>
<p>介绍：${item.introduce}</p>
<img src="${item.tp}" style="width:100%;height:150px;">
`
var infoWindow = new BMapGL.InfoWindow(html, opts); // 创建信息窗口对象
//map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
//蓝色是添加点的点击事件marker.addEventListener("click", function(e) {
this.openInfoWindow(infoWindow);
console.log(e)
});
})
//自定义地图的样式
下面是没有修改样式之前
改了样式之后
map.setMapStyleV2({
styleId: 'ab45773f920f8854d2f84cbbddbdad87'
});
</script>
</body>
</html>
