老张技术博客 老张头的网络笔记-分享精神
【百度地图】——利用三级联动下拉菜单加载百度地图
发表于 2021-7-23 | | 网站技术
今天老张在研究地图模块,做下拉框选定,就遇到了一些问题,之前对地图这块的知识接触的不是很多,于是就在网上搜了一下,还真有三级联动的,转载给大家,交流学习!
在这里插入图片描述
在这里插入图片描述
HTML+CSS代码如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=gGU58LULTYYEvYcqn8IQ5ZaEsqtaa1pj"></script>

    <style>
        #main {
            width: 100%;
            height: 500px;
            margin-top: 2px;
        }
    </style>
</head>

<body>
    <!-- 热门城市 -->
    <select name="" id="hotCity">
    <!-- <option value="">北京</option>  -->
    </select>

    <!-- 城市区域 -->
    <select name="" id="cityArea">
     <option value="">--请选择--</option>
    </select>

    <!-- 店铺信息 -->
    <select name="" id="shop">
       <option value="">店铺</option>
    </select>

    <!-- 地图 -->
    <div id="main"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

PHP代码如下:
在这里插入图片描述
在这里插入图片描述
JS代码如下:
$(function() {
    //1.获取热门城市
    $.ajax({
        type: 'get',
        url: 'php/getCity.php',
        dataType: 'json',
        success: function(res) {
            console.log(res.result.hotcity);
            var arr = res.result.hotcity;
            var str = '';
            for (var i = 0; i < arr.length; i++) {
                str += `<option value="${arr[i].code}">${arr[i].name}</option>`;
            }
            // console.log(str);       
            //添加热门城市
            $("#hotCity").html(str);
            // 获取了热门城市后---才有二级 和三级 
            getArea($("#hotCity").val());
            //店铺
            getShop($("#hotCity").val(), '', 1);

        },
        error: function(err) {
            console.log('请求失败');

        }
    })


    //2.获取城市的区域----注意:城市的区域受城市的影响,城市修改的时候 区域需要重新请求 
    //获取区域封装一个函数   函数接受外部的参数---参数:热门城市
    // getArea('shang_hai');
    function getArea(code) {
        //先清空区域的内容 --再追加对应的区域
        //--请选择---保留 他后面的数据 清空 
        $("#cityArea option:gt(0)").remove();

        $.ajax({
            type: 'get',
            url: 'http://bang.360.cn/aj/get_area/?citycode=' + code,
            dataType: 'jsonp',
            success: function(res) {
                console.log(res.result);
                //获取区域数据--注意:res.result是对象  遍历对象 for-in  获取数据
                var str = '';
                for (var key in res.result) {
                    str += ` <option value="${key}">${res.result[key]}</option>`;
                }
                //for循环结束后 str里面获取区域 
                //追加数据
                $("#cityArea").append(str);

            },
            error: function() {
                console.log('请求错误');

            }
        })
    }

    //3.店铺信息
    //获取三级店铺信息  参数:热门城市  区域  页码 
    //封装函数 接受参数变量 受前面的选择的时候,修改三级 
    // getShop('bei_jing','',1);
    function getShop(cityId, areaId, pn) {
        $.ajax({
            type: 'get',
            url: 'php/getShop.php',
            dataType: 'json',
            data: {
                cityId: cityId,
                areaId: areaId,
                pn: pn
            },
            success: function(res) {
                // console.log(res);
                var shop_data = res.shop_data;
                console.log('店铺信息:', shop_data);
                var str = '';
                for (var i = 0; i < shop_data.length; i++) {
                    str += `<option value="">${shop_data[i].shop_name}</option>`;
                }
                $("#shop").html(str);

                //渲染地图 打标注
                mapInfo(shop_data); //三级店铺信息数组

            },
            error: function() {
                console.log('请求失败');
            }
        })
    }


    //4.一级修改下拉选择后 选择不同的热门城市 对应的城市区域和店铺信息 对应更改
    $("#hotCity").change(function() {
        //获取当前选择的热门城市
        // console.log($(this).val());
        //二级动态修改---重新请求---请求当前的城市区域
        getArea($(this).val());
        //三级修改
        getShop($(this).val(), '', 1)
    })

    //二级修改的时候只是切换区域:对应的修改三级区域的店铺信息   一级不会修改:只是修改区域 不会影响城市
    $("#cityArea").change(function() {
        console.log($(this).val());
        //三级店铺
        getShop($("#hotCity").val(), $(this).val(), 1);
    })

    //创建地图
    // 创建地图实例
    var map = new BMapGL.Map("main");

    //设置中心点坐标 BMap命名空间下的Point类来创建一个坐标点
    var point = new BMapGL.Point(116.404, 39.915);

    //地图初始化 同时设置地图的级别(3-19)
    map.centerAndZoom(point, 12);

    //鼠标滚轮 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    //插入地图的店铺信息——在三级店铺信息后 插入信息
    function mapInfo(shopData) { //shopDatas是店铺信息 数组
        //移动到当前显示的第一个店铺上面
        map.panTo(new BMapGL.Point(shopData[0].map_longitude, shopData[0].map_latitude));
        //进入地图渲染标注的时候要清空内容
        map.clearOverlays();
        //渲染店铺信息 在地图上打标注
        for (var i = 0; i < shopData.length; i++) {
            //获取经纬度
            (function(i) {
                var point = new BMapGL.Point(shopData[i].map_longitude, shopData[i].map_latitude);
                //标注
                var marker = new BMapGL.Marker(point); //创建标注
                map.addOverlay(marker); //将标注添加到地图中
                //创建信息的窗口
                var opts = {
                        width: 250, // 信息窗口宽度
                        height: 100, // 信息窗口高度
                        title: shopData[i].shop_name // 信息窗口标题
                    }
                    // 创建信息窗口对象
                var content = '<div>' + shopData[i].addr + '</div>';
                var infoWindow = new BMapGL.InfoWindow(content, opts);

                // 打开信息窗口  地图的中心位置map.getCenter() 
                //  map.openInfoWindow(infoWindow, map.getCenter());
                //添加点击marker事件
                marker.addEventListener('click', function() {

                    map.openInfoWindow(infoWindow, point);
                })
            })(i);
        }

    }


});
版权声明:本文为CSDN博主「每天都在慢慢进步的王同学」的原创文章。
原文链接:https://blog.csdn.net/m0_46374969/article/details/118251248

发表评论:

免责声明:

本站提供的资源都来自网络版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序请支持正版软件,购买注册得到更好的正版服务。侵删请致信E-mail:2364633038@qq.com

TOP