使用百度地图api展示多个城市轮廓的例子
说明，本文章是参考了酸奶小妹的改写的，原文在 http://www.ui-love.com/baidumap/city/Boundary.html
有几个人问起多个县市轮廓的，分享一下。
多个县市轮廓的效果如这个url所示:
http://www.yyue.org/file/bound.html
注意，百度地图api 1.1才支持这个功能,在1.2中是不支持的。
相关说明可以参考
http://dev.baidu.com/wiki/map/index.php?title=Class:%E5%9F%BA%E7%A1%80%E7%B1%BB/Boundary
此类以像素表示一个城市区域。注意：该类只适用于1.1版本。
方法
| 方法 | 描述 |
|---|---|
| get(name, callback) | name: 查询省、直辖市、地级市、或县的名称
callback:执行查询后，数据返回到客户端的回调函数，数据以回调函数的参数形式返回。 返回结果是一个boundaries数组，数据格式如下： arr[0] = "x1, y1; x2, y2; x3, y3; ..." arr[1] = "x1, y1; x2, y2; x3, y3; ..." arr[2] = "x1, y1; x2, y2; ..." |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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.1&services=true">
</script>
<style type="text/css">
body{font-size:13px;margin:10px}
#container{width:800px;height:500px;border:1px solid gray}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
getBoundary("佛山","blue")
getBoundary("中山","green")
getBoundary("广州","red")
if (typeof console == "undefined"){
window.console = {log: function(){}};
}
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(113.339845,23.128291), 9);
var stdMapCtrl = new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})
map.addControl(stdMapCtrl);
map.enableScrollWheelZoom();
map.enableContinuousZoom();
function getBoundary(name,color){
var bdary = new BMap.Boundary();
bdary.get(name, function(rs){
console.log(rs);
var bounds;
var maxNum = -1, maxPly;
var count = rs.boundaries.length;
for(var i = 0; i < count; i++){
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, strokeColor: "#ff0000",FillOpacity:0});
ply.setFillColor(color);
ply.setFillOpacity("0.2");
map.addOverlay(ply);
var arrPts = ply.getPoints();
if(arrPts.length > maxNum){
maxNum = arrPts.length;
maxPly = ply;
}
}
if(maxPly){
map.setViewport(maxPly.getPoints());
}
});
}
</script>
