用HTML引入json数据库构建省市区三级多选地图

最新推荐文章于 2024-04-03 10:02:39 发布
最新推荐文章于 2024-04-03 10:02:39 发布
阅读量1.6k 收藏 3
点赞数
文章标签： 1024程序员节 javascript html5 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59749798/article/details/127495492
版权

今天呢，接到一个任务，用HTML构建一个多选的地图选择，不能引入其他的JS组件，为了方便我引用了jquery

刚开始也有点摸不到头脑~~之后从网上找方法！！接下来做一个汇总

首先呢省市区的json数据库，当然省市区县的也行，推荐地址（挺方便的）

GitHub - lyingying/echarts-mapJson: 中国各省市县区地图json包

主要业务逻辑，点击输入框出现下拉列表显示省，点击省出现市的列表，点击市显示区的列表，点击区把内容放到输入框里面实现多选、

1666600811797

1，创建JSON，直接从git上粘过来就行

2.创建显示框，刚开始的选择框还有省、市、区出现的显示框

3.引用json拿到里面的数据进行遍历，在这里拿到省里面的数据并拼接显示，点击省里面的li的时候，让市的ul出现且拿到数据，点击区同理

4.多选：点击区的时候，点击哪个push进数组哪个，重复的不能添加

5.到这里基本已经完成了，由于是html的原因，点击空白处无法令省市区消失，在这里加了一个点击处理

前端练习kun
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端 html5 省市区选择器
05-17
前端 html5 省市区选择器
vue echarts 中国地图处理南海诸岛为简图
n_2021的博客
09-12 2988
=访问这个网址，进入下图页面，选择图中标记的按钮，下载成功后的json文件为中文名称，将其改名为china.json。问题原因在于地图注册的时候，China的首字母大写，改成小写，就会出现缩略图。json文件中，删掉下面所示代码。
echarts 地图流向图的实现方法
sinat_33255495的博客
02-14 1684
【代码】echarts 地图流向图的实现方法。
html引入json文本测试数据
最新发布
weixin_45368812的博客
04-03 547
dayData.json存放测试数据，只需声明为变量即可。复现bug时，可以这样给前端准备测试数据。
HTML/JavaScript中引入json文件
qq_17627195的博客
05-06 2万+
方法一：通过<script >标签引入 第一步：在json文件中定义一个变量指向json数据（一些IDE会报错，不过不用管）。 var jsonData = { // json数据 }; 第二步：在HTML文件中使用<script>标签引入json文件 <script type="text/javascript" src="./xxx.json"></script> <script> // 控制台输出json console.log("json
HTML引入 Echarts实现地图的联动效果，默认展示省下所有市，点击某市会跳到本市下所有县的效果
@Grapefruit的博客
03-31 1638
要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) 首先我们要先画一个省级的地图，展示出这个省下面对应的所有市，这里柚子选择的是安徽省 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
基于HTML5的在线地图 - 加载TopoJSON数据
weixin_34112208的博客
03-29 714
为什么80%的码农都做不了架构师？>>> ...
2022年最新省市区三级JSON
01-06
2022年最新省市区三级JSON 下载直接使用 不满意可联系主业QQ或者官网联系方式 申请退款
JavaScript 省市区三级联动 json文件
11-25
省市区三级联动 , JavaScript 省市区三级联动 json文件,JavaScript 省市区三级联动 json文件
省市区三级联动json格式文件
09-25
省市区三级联动json格式文件省市区三级联动json格式文件省市区三级联动json格式文件省市区三级联动json格式文件省市区三级联动json格式文件省市区三级联动json格式文件
省市区三级联动json数据
04-14
省市区三级联动数据
省市区编码三级级联json
12-17
省市区编码三级级联json，省市区三级编码，名称 json
html5 引用 json 文件,html5的json地图引用
weixin_42298743的博客
06-17 501
1.需求描述地图组件是我们在创建报表中经常会用到的，那么如何实现在报表里将本地文件里面的地图应用上去。实现效果如下： ...
gis map数据包_ArcGIS教程：ArcGIS数据打包与地图发布
weixin_28760183的博客
01-14 2385
ArcGISPublisher为ArcGIS软件中的可选扩展模块，通过ArcGIS Publisher可轻松共享和分发地图与GIS数据。该扩展模块安装于ArcGIS Desktop中。利用Publisher可将ArcMap (.mxd)和ArcGlobe (.3dd)文档转换为用于ArcReader的发布的地图格式(.pmf)。ArcReader为免费软件，可查看pmf格式数据包，便于实现数据共享...
html页面json,在html页面中展示JSON
weixin_39625172的博客
06-03 932
方式一：以默认黑体显示Json字符串。我们经常会遇到想调试看下返回的Json字符串正不正确，以前总是使用alert(JsonUti.convertToString(data));但是JsonUti方法要引用一个JsonToString.js文件，这样就导致我每个项目中都要在Script文件夹中放一个JsonToString.js文件，然后在Shared里面的模板中引用。但其实这种返回的结果和 J...
在HTML/JavaScript中引入json文件
热门推荐
csdnyq的博客
06-08 3万+
在HTML/JavaScript中引入json文件 有2种引入方式： 使用<script >标签引入 使用ajax获取json 使用<script>引入 在json文件中定义一个变量指向这个json数据。 var jsonData = { //... }; 在HTML文件中使用<script>标签引入json文件 <script type="text/javascript" src="/map/xxx.json"></script>
html如何引用外部json,从外部URL解析json仅Html和JS
weixin_29323551的博客
06-15 799
该url是一个字符串，而不是json。使用AJAX来获取数据(使用jquery)var link;$.ajax({url: "test.html",}).done(function(data) {link = data;});然后，提取数据;output.innerHTML=jcontent.id;是价值。你得到这样的关键：使用function而不是arrow functions为ES7Objec...
html代码放进json数据,用json数据填充html表
weixin_30272849的博客
06-04 748
好的,在这个解决方案中,我假设您的外部json文件名为'example.json'你的外部文件应该是这样的示例.json:[{ "COUNTRY":"UK", "LoC":"London", "BALANCE":"78,573", "DATE":"1/06/2018" },{ "COUNTRY":"US", "LoC":"New York", "BALANCE":"43,568", "DATE":...
使用ajax和json实现省市区三级联动
06-28
使用Ajax和JSON实现省市区三级联动，可以实现在前端页面上选择省份后，联动显示该省份下的城市列表，再选择城市联动显示该城市下的区县列表。具体实现方式可通过使用jQuery的get()和post()方法获取后台传来的JSON...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值