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

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

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

先看看效果图吧:


实现思路:

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

      要实现通过地区筛选来动态加载地图,首先要有一套中国行政区域表。哪里来呢?如果你做过淘宝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://blog.csdn.net/a497785609/article/details/45287619
个人分类: Demo JavaScript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭