百度地图

  
  
  
  
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5.     <title>分布图</title> 
  6.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> 
  7. </head> 
  8. <body> 
  9. <div style="width:520px;height:768px;border:1px solid gray" id="container"></div> 
  10. </body> 
  11. </html> 
  12. <script type="text/javascript"> 
  13.     var map =new BMap.Map("container", {minZoom: 5, mapType: BMAP_SATELLITE_MAP}); 
  14.     map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})); 
  15.     map.addControl(new BMap.MapTypeControl()); 
  16.     map.enableScrollWheelZoom(); 
  17.  
  18.     // 获取服务器端返回的json数据 
  19.     var json = ${json}; 
  20.     for(var i in json) { 
  21.         // 视程>5公里,绿色显示;视程>3公里,黄色显示,视程>2公里,红色显示 
  22.         var vis = json[i].vis; 
  23.         var fillColor = "green"
  24.         if(vis<5000
  25.             fillColor = "yellow"
  26.         else if(vis < 3000
  27.             fillColor = "red"
  28.  
  29.         // 加标注 
  30.         var point = new BMap.Point(json[i].lot, json[i].lat); 
  31.         var marker = new BMap.Marker(point); 
  32.         map.addOverlay(marker); 
  33.  
  34.         (function(){ 
  35.             var opts = {title: '<span style="font-size: 14px; color: #0A8021">' + json[i].name.toString() +'</span>'}; 
  36.             var infoWindow =new BMap.InfoWindow('<div style="line-height:1.8em;font-size:12px;"><b>地址:</b>' + json[i].address + '</div>', opts); 
  37.             marker.addEventListener("mouseover", function(e){this.openInfoWindow(infoWindow,e.point);}); 
  38.         })(); 
  39.  
  40.         var circle = new BMap.Circle(point,vis,{fillColor: fillColor, strokeWeight: 1 ,fillOpacity: 0.8, strokeOpacity: 0.1}); 
  41.         map.addOverlay(circle); 
  42.     } 
  43.  
  44.     var bdary = new BMap.Boundary(); 
  45.     bdary.get('佛山', function(rs) { 
  46.         var count = rs.boundaries.length; 
  47.         for(var c = 0; c < count; c++) { 
  48.             var ply = new BMap.Polygon(rs.boundaries[c], {strokeWeight:1, strokeColor: "#000", fillColor: "#000", fillOpacity: 0.3}); 
  49.         }; 
  50.         map.addOverlay(ply); 
  51.         map.setViewport(ply.getPath()); 
  52.     }); 
  53.  
  54. </script> 

 感谢:http://www.verydemo.com/demo_c98_i5419.html

你可能感兴趣的:(百度地图)