百度地图--定位到城市
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>设置城市demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true" ></script>
</head>
<body>
<div id="container" style="width:500px;height:400px"></div>
<select id="menu1_province" name="menu1_province" onchange="MM_jumpMenu_province(this)">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="重庆">重庆</option>
<option value="广西">广西</option>
</select>
<select id="menu1_city" name="menu1_city">
<option value="北京">北京</option>
</select>
<input type="submit" onclick="GetMap()" value="定位到地图"/>
<script>
var map = new BMap.Map("container");
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(new BMap.Point(116.330599, 39.95536), 11); //初始化地图
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
var search = new BMap.LocalSearch("中国", {
onSearchComplete: function(result){
if (search.getStatus() == BMAP_STATUS_SUCCESS){
var res = result.getPoi(0);
var point = res.point;
map.centerAndZoom(point,11);
}
},renderOptions: { //结果呈现设置,
map: map,
autoViewport: true,
selectFirstResult: true
} ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数,有了这个,可以简单的改一下返回的html内容了。
//alert(html.innerHTML)
}//这一段可以不要,只不过是为学习更深层次应用而加入的。
});
</script>
<script type="text/JavaScript">
<!--
var beijing="北京,";
var shanghai="上海,";
var tianjin="天津,";
var chongqing="重庆,";
var guangxi=" 南宁,柳州,桂林,玉林,百色,宜州,河池,梧州,钦州,北海,防城港,";
function MM_jumpMenu_province(selObj){ //v3.0
switch(selObj.options[selObj.selectedIndex].value){
case "北京":
ShowSelect(beijing);
break;
case "上海":
ShowSelect(shanghai);
break;
case "天津":
ShowSelect(tianjin);
break;
case "重庆":
ShowSelect(chongqing);
break;
case "广西":
ShowSelect(guangxi);
break;
}
}
function ShowSelect(citylist){
var obj=document.getElementById('menu1_city');
obj.options.length=0;
var _citylist=citylist.split(',');
for(i=0;i<_citylist.length - 1;i++){
obj.add(new Option(_citylist[i],_citylist[i]),i);
}
}
function GetMap(){ //v3.0
var obj=document.getElementById('menu1_city');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;
search.search(val);
}
//-->
</script>
</body>
</html>