最近由于女朋友的需要，利用百度的API做了浦东医疗机构的分布图，现在分享下。
就是照着百度的DEMO照抄的，稍稍的修改了下，最麻烦的其实是找那些机构的坐标。。。。。。。
下面贴代码：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>浦东新区医疗机构分布</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=EllQn9ihG6KOBoNmPWVvZ23a"></script> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(121.59893,31.193333); // 创建点坐标 map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(); map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 function getBoundary(){ var bdary = new BMap.Boundary(); bdary.get("浦东新区", function(rs){ //获取行政区域 //map.clearOverlays(); //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个 for(var i = 0; i < count; i++){ var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, fillColor:"" , strokeColor: "#000000"}); //建立多边形覆盖物 并定义覆盖物的内外颜色 map.addOverlay(ply); //添加覆盖物 map.setViewport(ply.getPath()); //调整视野 } }); var areaName = new Array("宝山区","奉贤区","金山区","杨浦区","闸北区","长宁区","虹口区","静安区","徐汇区","普陀区","嘉定区","松江区","青浦区","闵行区","黄浦区","卢湾区","崇明"); for (var j=0; j < areaName.length ; j++){ bdary.get(areaName[j], function(rs){ //获取行政区域 //map.clearOverlays(); //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个 for(var i = 0; i < count; i++){ var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ffffff"}); //建立多边形覆盖物 并定义覆盖物的内外颜色 map.addOverlay(ply); //添加覆盖物 //map.setViewport(ply.getPath()); //调整视野 } }); } } setTimeout(function(){ getBoundary(); }, 1500); //三级医院 var hospitalName= new Array("上海中医药大学附属曙光医院","上海交通大学医学院附属仁济医院","上海中医药大学附属龙华医院浦东分院","复旦大学附属华山医院东院","第九人民医院浦东分院","上海市东方医院-本部","上海市东方医院-南院","上海市第七人民医院"); var hospitalLoc1 = new Array(121.599017,121.530108,121.50066,121.602887,121.537376,121.518919,121.520392,121.585196); var hospitalLoc2 = new Array(31.193325,31.213085,31.180374,31.245855,31.197642,31.243486,31.154094,31.349555); //二级综合医院 var hospitalseczh = new Array("上海市浦东新区人民医院","上海市浦东新区公利医院","上海市浦东新区周浦医院","上海浦东医院"); var seczhloc1 = new Array(121.7104,121.553094,121.602099,121.742124); var seczhloc2 = new Array(31.1947,31.247878,31.100631,31.064763); //二级专科医院 var hospitalsz = new Array("上海市浦东新区妇幼保健院","上海市浦东新区中医医院","浦东新区光明中医医院","上海市浦东新区浦南医院"); var szloc1 = new Array(121.602617,121.701467,121.768897,121.516359); var szloc2 = new Array(31.24408,31.186691,31.052126,31.203009); //社区卫生服务中心 var serviceName = new Array("上海市浦东新区江镇社区卫生服务中心","上海市浦东新区北蔡社区卫生服务中心","上海市浦东新区花木社区卫生服务中心","上海市浦东新区机场社区卫生服务中心","浦东新区王港社区卫生服务中心","浦东新区泥城泥城社区卫生服务中心","上海市浦东新区浦兴社区卫生服务中心","上海市浦东新区六灶社区卫生服务中心","浦东新区上钢社区卫生服务中心","上海市浦东新区川沙社区卫生服务中心","上海市浦东新区金桥社区卫生服务中心","上海市浦东新区金杨社区卫生服务中心","浦东新区大团社区卫生服务中心","上海市浦东新区周家渡社区卫生服务中心","上海市浦东新区凌桥社区卫生服务中心","上海市浦东新区洋泾社区卫生服务中心","上海市浦东新区高桥社区卫生服务中心","浦东新区曹路社区卫生服务中心","浦东新区祝桥社区卫生服务中心","上海市浦东新区新场社区卫生服务中心","上海市浦东新区老港社区卫生服务中心","上海市浦东新区沪东社区卫生服务中心","上海市浦东新区高行社区卫生服务中心","上海市浦东新区联洋社区卫生服务中心","芦潮港社区卫生服务中心","上海市浦东新区书院社区卫生服务中心","高东社区卫生服务中心","上海市浦东新区孙桥社区卫生服务中心","浦东新区万祥社区卫生服务中心","浦东新区塘桥社区卫生服务中心","上海市浦东新区唐镇社区卫生服务中心","上海市浦东新区潍坊社区卫生服务中心","迎博社区卫生服务中心","上海市浦东新区南码头社区卫生服务中心","上海市浦东新区陆家嘴社区卫生服务中心","浦东新区三林社区卫生服务中心","上海市浦东新区张江社区卫生服务中心","上海市浦东新区黄楼社区卫生服务中心","上海市浦东新区宣桥社区卫生服务中心","上海市浦东新区东明社区卫生服务中心","上海市浦东新区合庆社区卫生服务中心","上海市浦东新区周浦社区卫生服务中心","浦东新区康桥社区卫生服务中心","浦东新区康桥社区卫生服务中心-分中心","浦东新区惠南社区卫生服务中心","上海市浦东新区航头社区卫生服务中心"); var serviceloc1 = new Array(121.768897,121.559818,121.555127,121.76514,121.688456,121.835919,121.604583,121.719742,121.496019,121.700875,121.620404,121.579345,121.747001,121.516163,121.547611,121.558669,121.584404,121.689082,121.764185,121.651947,121.845726,121.589482,121.613619,121.567927,121.856087,121.879301,121.635155,121.639853,121.824816,121.528139,121.666552,121.530759,121.541865,121.52399,121.533782,121.505674,121.633086,121.674576,121.701358,121.535978,121.728422,121.591508,121.605043,121.622811,121.789072,121.60027); var serviceloc2 = new Array(31.052126,31.191603,31.210862,31.155438,31.242405,30.905603,31.283151,31.116801,31.178543,31.185649,31.269162,31.253411,30.973452,31.182938,31.371649,31.238955,31.356663,31.264617,31.12106,31.030507,31.045622,31.281646,31.300755,31.233366,30.882393,30.988413,31.326176,31.180034,30.975348,31.21463,31.212012,31.229375,31.175175,31.192244,31.243455,31.144799,31.202901,31.169158,31.04433,31.150509,31.244705,31.099201,31.131006,31.14612,31.037701,31.05058); //数据结尾标记 function addMarker(point,hname,styleid){ if (styleid==0){ var myIcon = new BMap.Icon("smallest.png", new BMap.Size(13,19)); //定义社区卫生中心图片 } else if (styleid==4){ var myIcon = new BMap.Icon("smaller.png", new BMap.Size(20,30)); //定义二级专科图片 } else if (styleid==2){ var myIcon = new BMap.Icon("smaller.png", new BMap.Size(20,30)); //定义二级综合图片 } else{ var myIcon = new BMap.Icon("bigger.png", new BMap.Size(45,42)); //定义三级综合图片 } var marker = new BMap.Marker(point, {icon:myIcon}); map.addOverlay(marker); var infoWindow = new BMap.InfoWindow(hname);//创建说明 marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);}); if (styleid!=0){ if (styleid==3){ var opts = { position : eryi, // 指定文本标注所在的地理位置 offset : new BMap.Size(10, -30) //设置文本偏移量 } var label = new BMap.Label(hname, opts); // 创建文本标注对象，设置特殊的标签 label.setStyle({ color : "black", fontSize : "16px", height : "22px", lineHeight : "22px", fontFamily:"微软雅黑" }); map.addOverlay(label); } else if (styleid==2){ var label = new BMap.Label(hname,{offset:new BMap.Size(20,-10)}); //建立标签 marker.setLabel(label); } else { var label = new BMap.Label(hname,{offset:new BMap.Size(20,15)}); //建立标签 marker.setLabel(label); } } } //建立社区卫生服务中心标注点 for (var i = 0; i < serviceName.length; i++) { var point = new BMap.Point(serviceloc1[i],serviceloc2[i]); addMarker(point,serviceName[i],0); } //建立二级综合医院标注点 for (var i = 0; i < hospitalseczh.length; i++) { var point = new BMap.Point(seczhloc1[i],seczhloc2[i]); addMarker(point,hospitalseczh[i],2); } //建立二级专科医院标注点 for (var i = 0; i < hospitalsz.length; i++) { var point = new BMap.Point(szloc1[i],szloc2[i]); addMarker(point,hospitalsz[i],4); } //建立三级医院标注点 for (var i = 0; i < hospitalName.length; i++) { var point = new BMap.Point(hospitalLoc1[i],hospitalLoc2[i]); addMarker(point,hospitalName[i],3); } </script> </body> </html>