百度地图-省市县联动加载地图

2019独角兽企业重金招聘Python工程师标准>>>

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

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

先看看效果图吧：

实现思路：

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

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

百度云网盘

在线预览

转载于:https://my.oschina.net/zhangqs008/blog/712769

百度地图-省市县联动加载地图相关推荐

arcengine 加载地图不显示_ArcEngine加载地图
对于ArcEngine开发者来说,万事第一步,就是要先加载地图数据,不过我们下面要讲的加载地图的方法不是用ArcEngine自带的控件或命令来实现的,而是以代码方式实现的.加载地图的方式主要分为两种: ...
C# ArcGIS 三维地图 arcgloblecontrol 基础操作加载地图漫游放大缩小
最近在调研arcgis地图,就把一些自己写的基本的操作po一下,希望对刚刚开始接触到arcgis的童鞋有点帮助,大神请指正吐槽. 效果就是这样滴: 正文: 引入命名空间: using ESRI.Arc ...
STK加载地图与高清影像图
在STK软件中,其3D/2D窗口中地球(其它行星类似)的地图图片是通过特定格式(带经纬度信息)的图片直接加载而成.选择合适的地图图片,除了可以显示不同形式的地理坐标外,还可提升视景仿真动画的逼真效果. ...
如何使用Robostudio加载地图？
由于slamcore没有保存地图的功能,在构建完地图以后,需要从上位机加载地图到slamcore里面,以便地图的复用.构建地图的过程请参考:如何构建一张满足导航需求的地图? 本文解释了关于加载地图的操 ...
Echarts3实例加载地图
前言 Echarts加载GeoJson数据生成canvas地图,可以实现地图简单的展示,获取GeoJson数据的方法见:https://blog.csdn.net/idomyway/article/d ...
【百度地图】——利用三级联动加载百度地图
[百度地图]--利用三级联动加载百度地图 HTML+CSS代码如下: <!DOCTYPE html> <html lang="en"><head> ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
arcengine 加载地图不显示_用LSV下载城市地图、全省地图教程
在LSV里,可以下载各种的城市地图.也可以下载DEM数据.近日,有粉丝私信给我,如何下载令人满意的城市地图/全省地图. 首先,在LSV里下载地图. 以一个地级市为例,如何下载某个地级市的行政区划+道路 ...
autoware加载地图数据与使用rosbag包建图（三）
autoware加载地图数据(三) 介绍如何为autoware加载地图数据启动autoware $ cd ~/autoware.ai $ source install/setup.bash $ ro ...

百度地图-省市县联动加载地图

百度地图-省市县联动加载地图相关推荐

最新文章

热门文章