【百度地图】——利用三级联动加载百度地图

àì夳堔傛蜴生んèń 2022-10-10 04:55 487阅读 0赞

## 【百度地图】——利用三级联动加载百度地图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]  
**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">
        
        </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代码如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]  
**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);
            }
    
        }
    
    
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]: /images/20221005/daa07bef9a54405f82a7c412c9ef2655.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]: /images/20221005/81bc0536794e476fa276508dd202114e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]: /images/20221005/12409e12abe54fe693572bfdb25d88b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]: /images/20221005/17b66f38837347eb847c03b8aba979e7.png