百度地图api高亮显示指定区域，其余遮罩
先放一张最后的效果图
主要功能：只显示天府新区（双流区+龙泉驿区）这一块，其他的地方就用半透明的遮罩层盖住，然后用Markers标注出每个项目的所在地点，当鼠标悬浮在标注点的时候就显示出项目名称。
html代码：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
7 <title>百度地图api简单使用</title>
8 <style type="text/css">
9 body,
10 html {
11 width: 100%;
12 height: 100%;
13 margin: 0;
14 font-family: "微软雅黑";
15 }
16
17 #l-map {
18 height: 600px;
19 width: 100%;
20 }
21
22 #r-result {
23 width: 100%;
24 font-size: 14px;
25 line-height: 20px;
26 }
27 </style>
28 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己申请的百度开发者ak"></script>
29 <!--限定显示区域api库-->
30 <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
31 <!--引入自己的js文件-->
32 <script type="text/javascript" src="myMap.js"></script>
33 </head>
34 <body>
35 <!--地图容器-->
36 <div id="myMap"></div>
37 </body>
38 </html>
myMap.js代码
1 // 创建地图实例
2 var map = new BMap.Map("myMap",{enableMapClick: false});
3 //以四川省为地图中心，显示层级为13
4 map.centerAndZoom("四川省", 13);
5 //允许滚动鼠标缩放地图
6 map.enableScrollWheelZoom(true);
7 setTimeout(function() {
8 map.enableDragging(); //两秒后开启拖拽
9 }, 2000);
10 var index = 0;
11 var myGeo = new BMap.Geocoder();
12 //需要批量解析显示的地址
13 var adds = [
14 "煎茶镇",
15 "新兴镇",
16 "永安镇",
17 "白家沟",
18 "正兴镇",
19 "万安镇",
20 "南湖湿地公园"
21 ];
22 var blist = [];
23 var districtLoading = 0;
24
25 function getBoundary() {
26 //设置指定显示区域双流、龙泉驿
27 addDistrict("成都市双流区");
28 addDistrict("成都市龙泉驿区");
29 }
30
31 function addDistrict(districtName) {
32 //使用计数器来控制加载过程
33 districtLoading++;
34 var bdary = new BMap.Boundary();
35 bdary.get(districtName, function(rs) { //获取行政区域
36 var count = rs.boundaries.length; //行政区域的点有多少个
37 if(count === 0) {
38 alert('未能获取当前输入行政区域');
39 return;
40 }
41 for(var i = 0; i < count; i++) {
42 blist.push({ points: rs.boundaries[i], name: districtName });
43 };
44 //加载完成区域点后计数器-1
45 districtLoading--;
46 if(districtLoading == 0) {
47 //全加载完成后画端点
48 drawBoundary();
49 }
50 });
51 }
52
53 function drawBoundary() {
54 //包含所有区域的点数组
55 var pointArray = [];
56
57 /*画遮蔽层的相关方法
58 *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
59 * 这样就做出了一个经过多次西北角的闭合多边形*/
60 //定义中国东南西北端点，作为第一层
61 var pNW = { lat: 59.0, lng: 73.0 }
62 var pNE = { lat: 59.0, lng: 136.0 }
63 var pSE = { lat: 3.0, lng: 136.0 }
64 var pSW = { lat: 3.0, lng: 73.0 }
65 //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
66 var pArray = [];
67 pArray.push(pNW);
68 pArray.push(pSW);
69 pArray.push(pSE);
70 pArray.push(pNE);
71 pArray.push(pNW);
72 //循环添加各闭合区域
73 for(var i = 0; i < blist.length; i++) {
74 //添加显示用标签层
75 var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) });
76 label.hide();
77 map.addOverlay(label);
78
79 //添加多边形层并显示
80 var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 2, strokeColor: "#5185E6", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物
81 ply.name = blist[i].name;
82 ply.label = label;
83 map.addOverlay(ply);
84
85 //将点增加到视野范围内
86 var path = ply.getPath();
87 pointArray = pointArray.concat(path);
88 //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
89 pArray = pArray.concat(path);
90 pArray.push(pArray[0]);
91 }
92
93 //限定显示区域，需要引用api库
94 var boundply = new BMap.Polygon(pointArray);
95 BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
96 map.setViewport(pointArray); //调整视野
97
98 //添加遮蔽层(描边线条，遮罩层颜色)
99 var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#fff", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 1 }); //建立多边形覆盖物
100 map.addOverlay(plyall);
101 }
102
103 function bdGEO() {
104 var add = adds[index];
105 geocodeSearch(add);
106 index++;
107 }
108 getBoundary();
109 function geocodeSearch(add) {
110 if(index < adds.length) {
111 setTimeout(window.bdGEO, 400);
112 }
113 myGeo.getPoint(add, function(point) {
114 if(point) {
115 var address = new BMap.Point(point.lng, point.lat);
116 addMarker(address, new BMap.Label(add, { offset: new BMap.Size(20, -10) }));
117 }
118 }, "成都市");
119 }
120 // 编写自定义函数,创建标注
121 function addMarker(point, label) {
122 //使用自定义图标做标注点，宽高为8 10
123 var myIcon = new BMap.Icon("marker_red_sprite2.png", new BMap.Size(8, 10));
124 var marker = new BMap.Marker(point,{icon: myIcon});
125 map.addOverlay(marker);
126 marker.setLabel(label);
127 label.setStyle({
128 display:"none"
129 })
130 marker.addEventListener("mouseover",function(e){
131 var label = this.getLabel();
132 //设置label的样式，这里没有过多要求，能显示出来就行
133 label.setStyle({
134 display:"block",
135 borderRadius:"2px",
136 border:"1px solid #5185E6",
137 padding:"2px 4px"
138 })
139 });
140 marker.addEventListener("mouseout",function(e){
141 var label = this.getLabel();
142 label.setStyle({
143 display:"none"
144 })
145 });
146 }
147 bdGEO();
js代码
原作者：https://www.cnblogs.com/HCVOLCANO/archive/2012/09/12/2681719.html
百度地图api高亮显示指定区域，其余遮罩的更多相关文章
- 百度地图API实现多区域标记
最近遇到一个业务就是需要需要在地图上标记多个区域.一般餐饮业做外卖的,配送范围一般是多区域的,那么在地图上标记配送范围的时候就需要能标记多个区域.长话短说,最初的实现原型的截图如下:
- 百度地图api将可视区域定位到当前所在位置
1.前言 开头不说点什么,总是有点不习惯.还是说点什么吧,关于百度地图,我用的次数还是比较多的,没办法,需求呀.好吧,在用百度地图的时候,确实有过很多需求,不过好在百度地图很强大,每次需求在探索后都能 ...
- vue项目，百度地图api高亮选取区域，高亮某个地区，行政区域等
效果如下: var blist = [] ,maxZoom: });// 创建地图实例 var point = new window.BMap.Point(89.48,31.57); map.cent ...
- 使用百度地图API产生指定范围的随机点
直接上代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- 根据百度地图API获取指定地点的经纬度
做项目时,遇到对地点获取地图中对应的经纬度,作一下笔记,以备以后直接使用 package com.hpzx.data; import java.io.BufferedReader; import ja ...
- 百度地图API 地图圈区域并计算坐标点是否在区域内
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【百度地图API】自行获取区域经纬度的工具
原文:[百度地图API]自行获取区域经纬度的工具 摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...
- 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
- 【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？
原文:[百度地图API]如何调整结果面板的样式?如何获取指定页码的结果? 摘要: 1.你是否想自定义查询后,结果面板的显示样式? 2.数据接口每次只返回10条结果,如何取到单独每一页的结果? ---- ...
- android 3.0+百度地图api地图如何移动到指定的经纬度处
由于百度地图api,2.0+和3.0+的改动比较大,api基本上被全换过了,有些同学可能2.0+的api使用的非常熟悉,但是更新到3.0+时,却会遇到一些小麻烦(由于api变了,你就需要重新学习它的a ...
随机推荐
- （已解决）富文本编辑器：使用layui的layedit怎么回显存放在数据库里的富文本数据（包含有图片base64码）？
1. 背景 我把富文本内容从后台导入到前端,回显在layui的layedit里面. 2. 步骤 直接在<textarea></textarea>中间进行赋值(我用的是模板赋值) ...
- vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-script setup的作用和lang=ts-vue后台管理模板
目录 vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-script setup的作用和lang=ts-vue后台管理模板 昨日内容回顾 ...
- Android版本功能
Android 1.0 2008年9月23日,发布Android操作系统中的第一个正式版本:Android 1.0(Astro"铁臂阿童木").全球第一台Android设备HTC ...
- 消息队列RocketMQ应用
引用: https://www.cnblogs.com/ciel717/p/16180083.html 官方手册:https://help.aliyun.com/document_detail/442 ...
- Jenkins+Docker 实现一键自动化部署项目！
博主分享的非常好:https://mp.weixin.qq.com/s/a0JOuiqLsUMcQSEjZ4uGTg 本文章实现最简单全面的Jenkins+docker+springboot 一键自动 ...
- Vue源码中的数据代理
直接开讲: 由于这个Vue底层封装的函数太多了,我这里只讲思路不说具体的执行了什么函数. const vm=new Vue({这里写一个data,可以是对象也可以是函数}) 在写这段代码的时候 ...
- 6.mysql优化案例
1.单表优化: 进行优化: 删除原来的三个字段的索引,创建二个字段的索引: 2.两表关联: 左连接,在右表创建索引 右连接,在左表创建索引: 3.三表关联:左关联全都在右表创建索引:
- 230219 Business 31-48
31. 31: Maternity LeaveVeronica, when is your baby due?Next month.Are you going on maternity leave? ...
- 使用python启动appium(虚拟器)
1.先安装各种库 https://www.cnblogs.com/zhanglingling00/p/14169462.html pip install Appium-Flutter-Finder p ...
- mysql索引相关知识
一.什么情况下会使索引失效? 二.sql优化您们是怎么做的? 1.首先开启数据库慢查询日志,定位到查询效率比较低的sql , 找出对应的sql语句并进行分析 1.表设计是否规范,是否符合三范式的标准( ...