百度地图JS只显示一个省
来源:互联网 发布:重庆网络电视台 编辑:程序博客网 时间:2024/05/15 23:43
转载地址:http://www.cnblogs.com/wondergx/p/5305602.html
效果图:
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里填写开发者密钥"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; } #container { height: 100%; } </style></head><body> <div id="container"></div><script type='text/javascript'> //提示:下面的代码用jquery,所以如果有不能运行的情况请引用后尝试//百度地图api container对应前端div名称 前端要引用2.0版本的百度地图api//需引用api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.jsvar map = new BMap.Map("container", { enableMapClick: false }); // 创建地图实例,禁止点击地图底图//设置样式map.setMapStyle({ styleJson: [ {//不显示点信息 "featureType": "poi", "elementType": "all", "stylers": { "color": "#ffffff", "visibility": "off" } } ]});map.disableDragging();//禁止拖动map.disableDoubleClickZoom();//禁止双击缩放var blist = [];var districtLoading = 0;function getBoundary() { addDistrict("广州越秀区"); addDistrict("广州从化区"); addDistrict("广州荔湾区"); addDistrict("广州天河区"); addDistrict("广州白云区"); addDistrict("广州黄埔区"); addDistrict("广州花都区"); addDistrict("广州番禺区"); addDistrict("广州南沙区"); addDistrict("广州海珠区"); addDistrict("广州增城"); }/** * 添加行政区划 * @param {} districtName 行政区划名 * @returns 无返回值 */function addDistrict(districtName) { //使用计数器来控制加载过程 districtLoading++; var bdary = new BMap.Boundary(); bdary.get(districtName, function (rs) { //获取行政区域 var count = rs.boundaries.length; //行政区域的点有多少个 if (count === 0) { alert('未能获取当前输入行政区域'); return; } for (var i = 0; i < count; i++) { blist.push({ points: rs.boundaries[i], name: districtName }); }; //加载完成区域点后计数器-1 districtLoading--; if (districtLoading == 0) { //全加载完成后画端点 drawBoundary(); } });}/** * 各种鼠标事件绑定 */function click(evt) { alert(evt.target.name);}function mouseover(evt) { evt.target.label.setZIndex(99); evt.target.label.setPosition(evt.point); evt.target.label.show();}function mousemove(evt) { evt.target.label.setPosition(evt.point);}function mouseout(evt) { evt.target.label.hide();}function drawBoundary() { //包含所有区域的点数组 var pointArray = []; /*画遮蔽层的相关方法 *思路: 首先在中国地图最外画一圈,圈住理论上所有的中国领土,然后再将每个闭合区域合并进来,并全部连到西北角。 * 这样就做出了一个经过多次西北角的闭合多边形*/ //定义中国东南西北端点,作为第一层 var pNW = { lat: 59.0, lng: 73.0 } var pNE = { lat: 59.0, lng: 136.0 } var pSE = { lat: 3.0, lng: 136.0 } var pSW = { lat: 3.0, lng: 73.0 } //向数组中添加一次闭合多边形,并将西北角再加一次作为之后画闭合区域的起点 var pArray = []; pArray.push(pNW); pArray.push(pSW); pArray.push(pSE); pArray.push(pNE); pArray.push(pNW); //循环添加各闭合区域 for (var i = 0; i < blist.length; i++) { //添加显示用标签层 var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) }); label.hide(); map.addOverlay(label); //添加多边形层并显示 var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 5, strokeColor: "#FF0000", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物 ply.name = blist[i].name; ply.label = label; ply.addEventListener("click", click); ply.addEventListener("mouseover", mouseover); ply.addEventListener("mouseout", mouseout); ply.addEventListener("mousemove", mousemove); map.addOverlay(ply); //添加名称标签层 var centerlabel = new BMap.Label(blist[i].name, { offset: new BMap.Size(0, 0) }); centerlabel.setPosition(ply.getBounds().getCenter()); map.addOverlay(centerlabel); //将点增加到视野范围内 var path = ply.getPath(); pointArray = pointArray.concat(path); //将闭合区域加到遮蔽层上,每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点 pArray = pArray.concat(path); pArray.push(pArray[0]); } //限定显示区域,需要引用api库 var boundply = new BMap.Polygon(pointArray); BMapLib.AreaRestriction.setBounds(map, boundply.getBounds()); map.setViewport(pointArray); //调整视野 //添加遮蔽层 var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 0.9 }); //建立多边形覆盖物 map.addOverlay(plyall);}setTimeout(function () { getBoundary();}, 100);</script></body>
2 0
- 百度地图JS只显示一个省
- 百度地图:一个页面多个地图,只显示一个地图的解决办法
- Android studio 百度地图开发(9)只显示网格不显示地图或者只显示一个部分地图
- Android 百度地图只显示 网格?
- 获取百度地图 只显示当前定位
- Android百度地图加载只显示网格
- 百度地图开发只显示网格不显示地图信息
- 百度地图隐藏后显示地图只显示一部分
- 百度地图 遍历marker并增加窗口 只显示最后一个窗口信息的问题
- (Android)百度地图--只定位获取数据不显示地图
- 网站添加自己公司的地图(使用的百度地图)时只显示一个空白框
- IOS SDK百度地图不能正常显示,只显示网格
- 为什么百度地图只显示网格不显示内容
- iOS 开发 百度地图 在模拟器上只显示网格!
- 调用百度地图只显示网格的问题
- 调用百度地图只显示网格的问题
- Android使用百度地图API,只显示灰色网格 解决方法
- eclipse Android开发百度地图只显示网格问题
- caffe下python网络创建
- C++头文件一览
- 金融数据类——全球股市
- H264的RTP负载打包的数据包格式,分组,分片
- Java标注过期方法@Deprecated
- 百度地图JS只显示一个省
- sikuli-maven,selenium集成环境
- 基于DragonBoard 410c的家庭智能环保卫士——(9)数据库设计
- hdu 1198 Farm Irrigation
- (15):使可变性最小化
- 读《统计自然语言处理》——马尔可夫模型
- Linux 在命令行中创建和展示幻灯片的教程
- 练习3
- LeetCode#371. Sum of Two Integers(位运算)