百度地图只显示某个省自定义标注点添加鼠标事件

小白初试，这里用广西省为例,但是感觉百度地图加载属实有点慢=。=

以下是完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=TLjkUDAFsU0vyG7dVn6f8Hbx165SCELO"></script><script type="text/javascript" src="https://bj.bcebos.com/v1/mapopen/api-demos/data/province.js"></script><script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.141/dist/mapvgl.min.js"></script><script src="https://bj.bcebos.com/v1/mapopen/cms/bmapgldemo/custom/mapstyleblack.js"></script><title>广西壮族自治区</title><style>html,body,#container {width: 100%;height: 100%;overflow: hidden;margin: 0;padding: 0}.info {z-index: 999;width: auto;padding: 10px;margin-left: 10px;position: fixed;top: 10px;background-color: #fff;border-radius: 5px;font-size: 14px;color: #666;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);}.selbox {margin: 8px 0;}select {width: 180px;height: 30px;border: 1px solid #ddd;}</style>
</head>
<body><div id="container"></div><script>var map = new BMapGL.Map('container');map.centerAndZoom(new BMapGL.Point(108.51, 23.32), 7); //设置中心点经纬度map.enableScrollWheelZoom();var zoomCtrl = new BMapGL.ZoomControl();map.addControl(zoomCtrl);// --- 添加行政区划 ---var dist = new BMapGL.DistrictLayer({name: '(广西壮族自治区)',kind: 1,fillColor: '#618bf8',fillOpacity: 1,strokeColor: '#daeafa',viewport: true});map.addDistrictLayer(dist);var point = new BMapGL.Point(107.45, 22.13); //坐标点经纬度//标注点var myicon = new BMapGL.Icon('https://ts2.cn.mm.bing.net/th?id=OIP-C.v1RFlHRBreDq34Vxbj37PAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2', // 百度图片　　　　　　　　new BMapGL.Size(40,40), // 视窗大小　　　　　　　　{// imageSize: new BMapGL.Size(144,92), // 引用图片实际大小　　　　　　　　　　// imageOffset:new BMapGL.Size(-10,0)  // 图片相对视窗的偏移　　　　　　　　})var marker = new BMapGL.Marker(point,{icon:myicon})map.addOverlay(marker); //添加标注点//添加遮罩层隐藏别的地区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);}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: 'red',strokeWeight: 3,strokeOpacity: 1});map.addOverlay(border);}})// --- 行政区划添加鼠标事件 ---dist.addEventListener('mouseover', function (e) {e.currentTarget.setFillColor('#9169db');});dist.addEventListener('mouseout', function (e) {e.currentTarget.setFillColor(e.currentTarget.style.fillColor);});</script>
</body>
</html>

然后设置地图不可缩放，不可拖拽即可。感觉这种方案并不是最佳方案，但是因为本人也是小白初试，很多地方还是做得不足,只能凑合用一下。
修改省份即可切换别的省，记得同时设置中心点，不然会出现遮罩层不出现或者其他bug.

百度地图只显示某个省自定义标注点添加鼠标事件相关推荐

调用百度地图只显示网格的问题
转自:推酷http://www.tuicool.com/articles/biyeY37 关于安卓调用百度地图只显示网格的问题,楼主也曾为此不知所措,曾怀疑是不是百度SDK的bug,在网上也搜了各种答 ...
百度地图JavaScript API 学习之自定义标注图标（一）
地图绘制之添加自定义标注图标(一) 通过Icon类可实现自定义标注的图标.附上Icon的类参考链接,自行查看官方提供了两种方法: 通过参数MarkerOptions的icon属性进行设置使用Mar ...
javascript百度地图只显示北京的解决
仅作为记录,大佬请跳过. javascript百度地图的源代码参考传送门所以需要找个某个位置的经纬度解决: 获取经纬度传送门其他参考(博主暂未使用) 传送门博主源代码: 在vs code中,将 ...
百度地图只显示指定的行政区域地图
效果图如下: 鼠标移动效果如下: 完整代码下载: https://download.csdn.net/download/talver/11932964 小技巧: 去除百度地图左下角Logo,在html ...
百度地图只显示你想要的部分
也许有一天开发百度地图的人也和我一样遇到同样的问题,这里将代码附上,一方面方便百度地图开发人员进行开发,另一方面已备后用. 代码有很大的优化空间,期望不吝指教. 下载链接http://download ...
百度地图API显示多个标注点的代码以及修改传参
引用的页面原始数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
【百度地图API】如何给自定义覆盖物添加事件
原文:[百度地图API]如何给自定义覆盖物添加事件摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...
Informerd详解（2）与C#百度地图定位显示项目学习
文章目录摘要一.Informer代码部分(2) 1.1 Deconder模块代码 1.2 model.py部分源码 1.3 训练与预测阶段 1.4 小结二. C# 调用百度地图API 的Demo ...

百度地图只显示某个省自定义标注点添加鼠标事件

百度地图只显示某个省自定义标注点添加鼠标事件相关推荐

最新文章

热门文章

百度地图 只显示某个省 自定义标注点 添加鼠标事件

百度地图 只显示某个省 自定义标注点 添加鼠标事件相关推荐

最新文章

热门文章

百度地图只显示某个省自定义标注点添加鼠标事件

百度地图只显示某个省自定义标注点添加鼠标事件相关推荐