百度地图不实例化地图获取城市商圈列表

最新推荐文章于 2022-07-18 18:56:00 发布

原创最新推荐文章于 2022-07-18 18:56:00 发布 · 5.6k 阅读

0 ·

CC 4.0 BY-SA版权

百度地图专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在不实例化百度地图的情况下，通过CityList.js获取城市和商圈列表。提供了相关的jsp源码示例，通过城市代码获取子区域（商圈）列表，并在选择城市时动态更新商圈选项。

才接触百度地图不久，由于要获取其城市列表而又不需要地图，这个问题找了好久，在网上找了好多没有答案，偶然看到了百度地图的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="description" content="">
<meta name="author" content="">

<title></title>

<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);
}
});
}