【百度地图】——利用三级联动加载百度地图
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); } } });
