在平常项目中,我们会遇到这样的业务场景:

客户希望把自己的门店绘制在百度地图上,通过省、市、区的选择,然后加载不同区域下的店铺位置。

先看看效果图吧:

实现思路:

第一步:整理行政区域表:

要实现通过地区筛选来动态加载地图,首先要有一套中国行政区域表。哪里来呢?如果你做过淘宝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>

说明都在代码注释里了,应该很容易理解,这里就不重复了。

完整Demo下载

百度云网盘

在线预览

版权声明:本文为博主原创文章,未经博主允许不得转载。

百度地图-省市县联动加载地图 分类: Demo JavaScript 2015-04-26 13:08 530人阅读 评论(0) 收藏的更多相关文章

  1. Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  2. Web App 向上滑动动态加载数据 2015-06-11 09:36 20人阅读 评论(0) 收藏

    好久没有写博客了 - - ,个人原因 个人原因..  宣传一下...自己的.NET群:252713569 欢迎各位大神加入 嗯..最近在公司开发微信平台的东西..需要做一个WebAPP(PS:其实就是 ...

  3. JAVA 对象数组,加载图片实例 分类: Java Game 2014-08-14 16:57 80人阅读 评论(0) 收藏

    主函数: package com.mywork; import java.awt.Color; import java.awt.Image; import javax.swing.ImageIcon; ...

  4. winform 解决界面闪动、提升加载速度 分类: WinForm 2015-02-03 16:34 161人阅读 评论(0) 收藏

    说明: 从一个技术交流群里获得,经验证效果不错. //作用 加快界面加载 protected override CreateParams CreateParams          {         ...

  5. ZEDBOARD启动自启配置(加载镜像) 分类: OpenCV ubuntu shell ZedBoard Eye_Detection 2014-11-08 18:53 167人阅读 评论(0) 收藏

    参考:陆书14.2.8 1)备份ramdisk8M.image.gz 2)加载rootfs镜像文件: 3)在镜像目录下建立自己所需文件夹(挂载目录): 我需要的挂载目录有两个: root/qt/ins ...

  6. 菊花加载第三方--MBprogressHUD 分类: ios技术 2015-02-05 19:21 120人阅读 评论(0) 收藏

    上次说到了网络请求AFN,那么我们在网络请求的时候,等待期间,为了让用户不认为是卡死或程序出错,一般都会放一个菊花加载,系统有一个菊花加载类叫UIProgressHUD.但是我今天要说的是一个替代它的 ...

  7. hadoop配置文件的加载机制 分类: A1_HADOOP 2015-01-21 11:29 839人阅读 评论(0) 收藏

    hadoop通过Configuration类来保存配置信息 1.通过Configuration.addResource()来加载配置文件 2.通过Configuration.get***()来获取配置 ...

  8. 百度编辑器ueditor插入表格没有边框,没有颜色的解决方法 2015-01-06 09:24 98人阅读 评论(0) 收藏

    百度富文本编辑器..很强大.. - - ,不过有些BUG..真的很无解.. 最近用这个,发现上传的表格全部没有表框.. 解决办法如下: 转载的.. 百度编辑器ueditor插入一个表格后,在编辑过程中 ...

  9. 百度编辑器UEditor ASP.NET示例Demo 分类: ASP.NET 2015-01-12 11:18 346人阅读 评论(0) 收藏

    在百度编辑器示例代码基础上进行了修改,封装成类库,只需简单配置即可使用. 完整demo下载 版权声明:本文为博主原创文章,未经博主允许不得转载.

随机推荐

  1. 如何用命令检查Linux服务器性能

    1.查看系统负载 (1)uptime 这个命令可以快速查看机器的负载情况. 在Linux系统中,这些数据表示等待CPU资源的进程和阻塞在不可中断IO进程(进程状态为D)的数量. 命令的输出,load ...

  2. 【caffe】绘制网络结构图

    @tags caffe 网络结构 可视化 当拿到一份网络定义文件net.prototxt,可以用工具画出网络结构.最快速的方法是使用在线工具netscope,粘贴内容后shift+回车就可以看结果了. ...

  3. 【bzoj1913】 Apio2010—signaling 信号覆盖

    http://www.lydsy.com/JudgeOnline/problem.php?id=1913 (题目链接) 题意 给出一个平面上n个点,求任选3个点画一个圆所包含的点的期望值. Solut ...

  4. oracle--知识点汇总2---laobai

    --复制表 create table emp as(select * from scott.emp); select * from emp; --Demo1创建存储过程,实现将emp表comm为空时, ...

  5. 测试dns

    测试dns nslookup test.cn 10.109.68.114 ipconfig /flushdns dig test.cn @10.109.68.114 sudo /etc/init.d/ ...

  6. python3随记——字符编码

    1.1什么是字节 字节(Byte)是计算机信息技术用于计量存储容量的一种计量单位,也表示一些计算机编程语言中的数据类型和语言字符. 比特(bit)在计算机中最小的单位,在二进制位的电脑的系统中,每一b ...

  7. 逆向工程学习第三天--另外一个ShellCode

    上周自己打造的添加用户的shellcode太长,不过当时主要目的是为了锻炼手动asm,熟悉一些复杂的参数类型如何手动进行构造,然后通过堆栈传递. 接下来就打造一个弹计算器的shellcode来进行接下 ...

  8. 正则表达式之g标志,match和 exec

    1.g标志    g标志一般是与match和exec来连用,否则g标志没有太大的意义. 先来看一个带g标志的例子: var str = "tankZHang (231144) tank yi ...

  9. PHP ajax基础

    后台对数据处理,并返回前台: <?php //接收 $action = $_GET['action']; if ($action == 'orderID') { $orderID = trim( ...

  10. NOIP2009 Hankson的趣味题

    题目描述 Description Hanks 博士是BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫Hankson.现在,刚刚放学回家的Hankson 正在思考一个有趣的问题.今天在 ...