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

本文介绍了如何在不实例化百度地图的情况下,通过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="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);
            }
        });
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值