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

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