百度地图——利用三级联动加载百度地图
Posted 乘风破浪的程序媛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图——利用三级联动加载百度地图相关的知识，希望对你有一定的参考价值。
【百度地图】——利用三级联动加载百度地图
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);
}
}
});
以上是关于百度地图——利用三级联动加载百度地图的主要内容，如果未能解决你的问题，请参考以下文章