摘要：本文介紹了三種切換城市的方式：查詢城市、城市列表和顯示城市輪廓。
---------------------------------------------------------------------
很多API愛好者問到我，如何像百度地圖那樣，實現各個城市之間的切換呢？
在這裏，公佈以下三種方式。
第一種，是查詢城市的方法。使用API接口的LocalSearch方法。我之前寫過完整的文章，請查看：
http://www.cnblogs.com/milkmap/archive/2010/12/22/1914106.html
另外，如果不想顯示紅色的標註，和信息窗口。可以嘗試以下代碼：
API1.2，利用localsearch找到第一個結果的經緯度，然後重新設置地圖中心點。]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>西單</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
function myFun(){
var pp = local.getResults().getPoi(0).point;
map.centerAndZoom(pp, 18);
}
var local = new BMap.LocalSearch(map, {
onSearchComplete: myFun
});
local.search("西單");
</script>
============================================================
上面這種方式有個缺陷，就是會顯示出查詢城市的紅色標註，還有一個信息窗口。由於百科沒有該城市的數據，這個信息窗口裏還沒有該城市的描述。
可不可以去掉標註，還有信息窗口呢？我只想切換城市呢。
接下來，就介紹一下第二種方法，點選城市列表，切換城市。
查看源代碼，運行示例，請點擊http://www.ui-love.com/baidumap/city/selectCity.htm （服務器原因，可能打開速度較慢，請耐心等待）
代碼請看官網的libaray中的“城市列表”：http://dev.baidu.com/wiki/map/index.php?title=MapLibrary
===========================================================================
第三種，顯示城市輪廓。最後這種方法我比較喜歡，當你切換城市的時候，可以顯示出這個城市的輪廓。點擊運行：http://www.ui-love.com/baidumap/city/Boundary.html
你只需要簡單地使用Bounds這個類就可以了。
var bdary =new BMap.Boundary();
bdary.get(“山東省”, function(rs){
console.log(rs);//rs是返回的結果
})；
注意，以下提供的boundary代碼是API1.1版本的，僅爲參考。
<!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?key=46ce9d0614bf7aefe0ba562f8cf87194&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>
<br />
輸入省、直轄市或縣名稱：<input type="text" id="districtName" style="width:80px" value="山東省">
<input type="button" οnclick="getBoundary()" value="獲取輪廓線">
<script type="text/javascript">
if (typeof console == "undefined"){
window.console = {log: function(){}};
}
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
var stdMapCtrl = new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})
map.addControl(stdMapCtrl);
map.enableScrollWheelZoom();
map.enableContinuousZoom();
function getBoundary(){
var bdary = new BMap.Boundary();
var name = document.getElementById("districtName").value;
bdary.get(name, function(rs){
console.log(rs);
map.clearOverlays();
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: 2, strokeColor: "#ff0000"});
map.addOverlay(ply);
var arrPts = ply.getPoints();
if(arrPts.length > maxNum){
maxNum = arrPts.length;
maxPly = ply;
}
}
if(maxPly){
map.setViewport(maxPly.getPoints());
}
});
}
</script>
</body>
</html>