百度地图-省市县联动加载地图 分类： Demo JavaScript 2015-04-26 13:08 530人阅读 评论(0) 收藏
在平常项目中，我们会遇到这样的业务场景：
客户希望把自己的门店绘制在百度地图上，通过省、市、区的选择，然后加载不同区域下的店铺位置。
先看看效果图吧：
实现思路：
第一步：整理行政区域表：
要实现通过地区筛选来动态加载地图，首先要有一套中国行政区域表。哪里来呢？如果你做过淘宝API接入，应该会想到淘宝物流接口提供了一个官方的行政区域代码，这个比较靠谱。
第二步：收集行政区域的经纬度：
这个就有点麻烦了，虽然可以在百度坐标拾取系统一个一个的收集整理，但是3000多条记录，是个不小的体力活。于是经过多方面的查找，找到了一份已经由前辈整理过的经纬度表；再结合第一步里的区域，最终得到了一份数据相对齐全的行政区域表。（建表SQL语句见文末下载地址）
第三步：制作地区筛选页面：
地区筛选，三级联动，为了方便演示，以及区域表更新的几率不大，将区域表内容输入成一个json串，保存为area.js文件，大概内容像这样：
var areas = [
{"code":"110000","parentCode":"0","level":"1","name":"北京市","latitude":"39.929986","longitude":"116.395645"},
{"code":"110100","parentCode":"110000","level":"2","name":"市辖区","latitude":"","longitude":""},
{"code":"110101","parentCode":"110100","level":"3","name":"东城区","latitude":"39.938574","longitude":"116.421885"},
...
];
有了数据源，再来做页面就方便多了。
HTML部分：
<!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>
<title>区域地图</title>
<!--css-->
<link href="style/demo.css" rel="stylesheet" type="text/css" />
<!--javascript-->
<script src="scripts/area.js" type="text/javascript"></script>
<script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="scripts/demo.js" type="text/javascript"></script>
</head>
<body>
<div class="demo_main">
<fieldset class="demo_title">
在线区域地图<span class="author">资源提供者： 清山博客 [2015年4月26日11:38:45]</span>
</fieldset>
<fieldset class="demo_content">
<div>
省份：
<select name="province">
</select>
城市：<select name="city">
</select>
县区：<select name="county">
</select>
<span class="tips" style="color: green">请选择地区</span>
</div>
<div style="min-height: 450px; margin-top: 5px; width: 100%;" id="map">
</div>
</fieldset>
<script type="text/javascript">
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}
window.onload = map_load;
//根据经纬度显示地区
function loadPlace(longitude, latitude, level) {
if (parseFloat(longitude) > 0 || parseFloat(latitude) > 0) {
level = level || 13;
//绘制地图
var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(longitude, latitude); //地图中心点
map.centerAndZoom(point, level); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(true); //启用滚轮放大缩小
//向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve);
//向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
}
}
</script>
</div>
</body>
</html>
</span>JS部分（demo.js）：
<span style="font-size:12px;">$(function() {
//设置默认值
var option = $("<option>").val("0").text("==请选择省份==");
$("[name='province']").append(option);
option = $("<option>").val("0").text("==请选择城市==");
$("[name='city']").append(option);
option = $("<option>").val("0").text("==请选择县区==");
$("[name='county']").append(option);
//绑定省份
for (var i = 0; i < areas.length; i++) {
if (parseInt(areas[i].level) == 1) {
option = $("<option>").val(areas[i].code).text(areas[i].name);
$("[name='province']").append(option);
}
}
//城市联动
$("[name='province']").bind("change", function() {
var code = parseInt($(this).val());
//加载城市
if (code > 0) {
$("[name='city'] option:gt(0)").remove();
for (var i = 0; i < areas.length; i++) {
if (parseInt(areas[i].parentCode) == code) {
option = $("<option>").val(areas[i].code).text(areas[i].name);
$("[name='city']").append(option);
}
}
}
//绘制地图
if (code > 0) {
for (var i = 0; i < areas.length; i++) {
if (parseInt(areas[i].code) == code) {
var longitude = areas[i].longitude;
var latitude = areas[i].latitude;
loadPlace(longitude, latitude, 10);
break;
}
}
}
});
//城市联动
$("[name='city']").bind("change", function() {
var code = parseInt($(this).val());
//加载县区
if (code > 0) {
$("[name='county'] option:gt(0)").remove();
for (var i = 0; i < areas.length; i++) {
if (parseInt(areas[i].parentCode) == code) {
option = $("<option>").val(areas[i].code).text(areas[i].name);
$("[name='county']").append(option);
}
}
}
//绘制地图
if (code > 0) {
for (var i = 0; i < areas.length; i++) {
if (parseInt(areas[i].code) == code) {
var longitude = areas[i].longitude;
var latitude = areas[i].latitude;
loadPlace(longitude, latitude, 12);
break;
}
}
}
});
//县区联动
$("[name='county']").bind("change", function() {
var code = parseInt($(this).val());
//绘制地图
if (code > 0) {
for (var i = 0; i < areas.length; i++) {
if (parseInt(areas[i].code) == code) {
var longitude = areas[i].longitude;
var latitude = areas[i].latitude;
loadPlace(longitude, latitude);
break;
}
}
}
});
});</span>说明都在代码注释里了，应该很容易理解，这里就不重复了。
版权声明：本文为博主原创文章，未经博主允许不得转载。
