【百度地图】——利用三级联动加载百度地图
【百度地图】——利用三级联动加载百度地图
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);}}});
【百度地图】——利用三级联动加载百度地图相关推荐
- python下载谷歌地图瓦片_openLayers TMS加载谷歌地图瓦片
openLayers TMS中加载谷歌瓦片 经纬坐标(LonLat) 和投影坐标系的转换 /** openLayer根据TMS加载谷歌地图瓦片 (1)先去下载加载谷歌地图瓦片,这样的软件有(水经注 ...
- echarts地图罗平县的json_Echarts 加载省地图json
我想要的效果: 解决步骤: 1.安装引入 npm install echarts import Echarts from 'echarts' // 全局注册Echarts Vue.prototype. ...
- 百度地图-省市县联动加载地图
2019独角兽企业重金招聘Python工程师标准>>> 在平常项目中,我们会遇到这样的业务场景: 客户希望把自己的门店绘制在百度地图上,通过省.市.区的选择,然后加载不同区域下的店铺 ...
- android瓦片地图下载,Andorid 如何加载 瓦片地图
之前用的高德是这样加载 的 aMap.addTileOverlay(new TileOverlayOptions().tileProvider(new UrlTileProvider(256, 256 ...
- OpenLayers3加载百度地图
BaiduMapSource.js /*** 加载百度地图* @returns {ol.layer.Tile}*/ function loadBaiduMap() {//数据源信息var attrib ...
- OpenLayers教程十一:多源数据加载之用最简单的方式加载瓦片地图
目录 一.加载OpenStreetMap 二.加载Stamen Map 三.加载Bing Map OpenLayers封装了一些瓦片地图源类用于加载瓦片地图,这些类包括: ol.source.OSM ...
- FGMap学习之--加载百度地图
今天我们用FGMap来加载百度地图数据. 从目前国内的地图服务商提供的地图来看,地图瓦片切图规则只少分为三种.其中Google Map.Bing地图.MapABC.QQ地图是一类,而百度地图.搜狗地图 ...
- Openlayers3 加载百度地图,天地图
2019独角兽企业重金招聘Python工程师标准>>> openlayers3 加载百度地图: var projection = ol.proj.get("EPSG:385 ...
- 基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录 应用场景 需求分析 效果图 实现代码 原理解读 应用场景 部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
最新文章
- matlab固定床反应器,合成气完全甲烷化固定床反应器数值模拟
- asp.net webform html,ASP.NET WebForm页面内容输出方式
- 无符号定点数加法运算的VHDL描述
- C++总结笔记(七)—— 运算符重载
- 《中国人工智能学会通讯》——5.16 结 论
- leetcode 697. 数组的度(hashmap)
- [Github项目推荐] 机器学习 Python 知识点速查表
- Leetcode--31. 下一个排列
- 华为任正非推荐学习的博士PPT《认识5G,发展5G》
- centos镜像 from_下载 CentOS 7 镜像文件
- 廖雪峰python教程-福利 | 廖雪峰官方Python教程,拿走不谢!
- python-docx原有图片居中
- CKEditor配置及使用
- LED闪烁 闪灯芯片IC 手电筒IC 闪灯控制IC 闪烁IC流水灯
- matlab中逗号分号冒号方括号,matlab中分号、冒号、逗号等常用标点符号的功能和用法总结...
- 利用R语言画简单时间序列图
- talib.AROON指标详解
- 从企业钉钉的接口获取数据
- 【附源码】计算机毕业设计SSM时事新闻管理系统
- 苹果开发者帐号关联大批量下架如何规避?