才接触百度地图不久,由于要获取其城市列表而又不需要地图,这个问题找了好久,在网上找了好多没有答案,偶然看到了百度地图的CityList.js,看到了下图所说,就试了一
下,竟然成了,所以顺便写下来,以供日后参考,也可为他人提供帮助。可参考链接:http://api.map.baidu.com/library/CityList/1.4/docs/symbols/BMapLib.CityList.html
jsp源码如下所示:(内容有点粗糙...)
<!DOCTYPE html>
<html lang="zh-CN">
<%@ page pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String _path = request.getContextPath();
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--meta name="viewport" content="width=device-width, initial-scale=1.0"-->
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="<%=_path%>/css/bootstrap/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=_path%>/css/common.css"/>
<link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/12/bmap.css">
<link rel="stylesheet" href="<%=_path%>/css/datetimepicker/bootstrap-datetimepicker.min.css" media="screen">
</head>
<body>
<div class="dw_header">
</div>
<div id="adLoc" class="container">
<label>区:</label>
<select class="selectpicker filtersec" id="cityArea" data-style="btn-primary" ></select>
<label>商圈:</label>
<select class="selectpicker filtersec" id="cityBusiness" data-container="body"></select>
</div>
<script src="<%=_path%>/js/jquery-1.11.1.min.js"></script>
<script src="<%=_path%>/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nAOmS8G3oSU5ivkL8fNSAEWx"></script>
<script src="<%=_path%>/js/baidumap/CityList.js"></script>
<script type="text/javascript">
var ipLocation ={"address":"|None|CHINANET|None|None","content":{"address":"","address_detail":{"city":"武汉","city_code":218,"district":"","province":"","street":"","street_number":""},"point":{"x":"114.31620010","y":"30.58108413"}},"status":0};
var bMapCityList;
var curCityCode;
$(function()
{
curCityCode = ipLocation.content.address_detail.city_code;
bMapCityList = new BMapLib.CityList();
setLoc();
});
var setLoc = function()
{
var areaCode;
bMapCityList.getSubAreaList(curCityCode, function(json){
for(i=0;i<json.sub.length;i++)
{
var area = json.sub[i];
$('#cityArea').append("<option value="+area.area_code + ">" + area.area_name + "</option>");
}
areaCode = json.sub[0].area_code;
bMapCityList.getSubBusinessList(areaCode, function(data){
for(i=0;i<data.sub.length;i++)
{
var business = data.sub[i];
$('#cityBusiness').append("<option value="+business.area_code + ">" + business.area_name + "</option>");
}
});
});
};
$('#cityArea').change(function(){
$('#cityBusiness').empty();
bMapCityList.getSubBusinessList($(this).find("option:selected").val(), function(data){
for(i=0;i<data.sub.length;i++)
{
var business = data.sub[i];
$('#cityBusiness').append("<option value="+business.area_code + ">" + business.area_name + "</option>");
}
});
});
</script>
</body>
</html>
要成功引用,还需在cityList.js中添加如下代码:
CityList.prototype.getSubBusinessList = function (areaCode, cbk) {
var url = config.serviceUrl + "/shangquan/forward/?qt=sub_area_list&ext=1&level=1&areacode=" + areaCode + "&business_flag=1";
DataMgr.request(url,function(json){
var result = null;
if (json && json['result'] && json['result']['error'] == "0") {
result = json['content'];
}
result.geo = geoToPoint(result.geo);
for (var i = 0, len = result.sub.length; i < len; i++) {
result.sub[i]['geo'] = geoToPoint(result.sub[i]['geo']);
}
if (cbk) {
cbk(result);
}
});
}