- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>分布图</title>
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
- </head>
- <body>
- <div style="width:520px;height:768px;border:1px solid gray" id="container"></div>
- </body>
- </html>
- <script type="text/javascript">
- var map =new BMap.Map("container", {minZoom: 5, mapType: BMAP_SATELLITE_MAP});
- map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
- map.addControl(new BMap.MapTypeControl());
- map.enableScrollWheelZoom();
- // 获取服务器端返回的json数据
- var json = ${json};
- for(var i in json) {
- // 视程>5公里,绿色显示;视程>3公里,×××显示,视程>2公里,红色显示
- var vis = json[i].vis;
- var fillColor = "green";
- if(vis<5000)
- fillColor = "yellow";
- else if(vis < 3000)
- fillColor = "red";
- // 加标注
- var point = new BMap.Point(json[i].lot, json[i].lat);
- var marker = new BMap.Marker(point);
- map.addOverlay(marker);
- (function(){
- var opts = {title: '<span style="font-size: 14px; color: #0A8021">' + json[i].name.toString() +'</span>'};
- var infoWindow =new BMap.InfoWindow('<div style="line-height:1.8em;font-size:12px;"><b>地址:</b>' + json[i].address + '</div>', opts);
- marker.addEventListener("mouseover", function(e){this.openInfoWindow(infoWindow,e.point);});
- })();
- var circle = new BMap.Circle(point,vis,{fillColor: fillColor, strokeWeight: 1 ,fillOpacity: 0.8, strokeOpacity: 0.1});
- map.addOverlay(circle);
- }
- var bdary = new BMap.Boundary();
- bdary.get('佛山', function(rs) {
- var count = rs.boundaries.length;
- for(var c = 0; c < count; c++) {
- var ply = new BMap.Polygon(rs.boundaries[c], {strokeWeight:1, strokeColor: "#000", fillColor: "#000", fillOpacity: 0.3});
- };
- map.addOverlay(ply);
- map.setViewport(ply.getPath());
- });
- </script>
百度地图
原创
©著作权归作者所有:来自51CTO博客作者magicsa的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:panabit使用1
下一篇:tomcat 监控
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
百度云AI
在人工智能的浪潮中,人脸识别技术如同一颗璀璨的明珠,吸引着无数科技爱好者的目光。
百度云 java 人脸识别 -
百度地图的环境搭建(基于百度地图1.3.3)
ml在AndroidManifest.xml中加上以下代码: <sup
android ide 百度地图 -
调用百度地图
} 房型 $(function(){
百度地图 javascript html java json -
页面中插入百度地图(利用百度地图API)
.aspx代码如下: var map = new BMap.Map("div_baiduMap"); map.centerAndZoom(new BMap.Point(116.321565, 39.979607),
百度地图 asp.net html ico javascript -
百度地图 标线
百度地图 标线
json ico html 数组 控件 -
百度地图聚合
一、牛人们的想法下面是我参考的有关的博客,下面将一一列举1.Ma
git android 百度地图