使用jquery对接高德地图地址四级联动

已于 2023-01-11 17:48:47 修改
阅读量1.1k 收藏 1
点赞数 1
分类专栏： 技术 文章标签： jquery javascript 前端
于 2019-05-02 10:59:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41206996/article/details/89743258
版权

最近在商城项目上遇到了收获地址的瓶颈,可以有两种的解决办法

  1. 自己的库,几十W条数据的那种
  2. 去对接第三方的服务

我找到了阿里爸爸提供的一个服务,高德地图提供的服务

官方的文档地址 : 点我

下方代码的预览地址 : 点我

项目的下载地址 : 点我

开始撸

1.去创建自己的应用,并且申请 Web服务

点我

2. 复制下方代码,到自己的页面上即可。

<!DOCTYPE html>
<html>
<head>
	<title>选择您的收获地址</title>
</head>
<!-- 引入bootstrap 给默认的下拉框优化用的  -->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">

<body>
   <div>
          	<select id="sheng">
                <option>请选择省</option>
            </select>
	          <select id="shi"></select>
	          <select id="xian"></select>
	          <select id="zhen"></select>
   </div>

<!--引入jquery-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
  
  var amapkey="";  //高德地图的开发key 填写自己的即可。

	$(function(){
		//在进入页面的时候 省默认写死
		var provinceList = ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省','黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省','河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市','四川省', '贵州省', '云南省', '内蒙古自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '澳门特别行政区'];     

    var shengHtml="";
		for (var i = 0; i < provinceList.length; i++) {
			shengHtml+='<option value="'+provinceList[i]+'">'+provinceList[i]+'</option>';
		}
	  $("#sheng").append(shengHtml);


	  //查询第二级
       $("#sheng").change(function(){

          //删除之前所选择的
          $("#shi").find("option").remove();
          $("#xian").find("option").remove();
          $("#zhen").find("option").remove();

       	var shihtml="<option value='请选择'>请选择市</option>";
       	var shengval=$(this).val();
       	   $.ajax({
         		type:"post",
         		url:"https://restapi.amap.com/v3/config/district?subdistrict=1&key="+amapkey+"&keywords="+shengval,
         		dataType:"jsonp",
         		success:function(data){ 	
                   $.each(data.districts,function(i,cityvalue){   
                         $.each(cityvalue.districts,function(cityi,city){
                              shihtml+='<option value="'+ city.name+'">'+ city.name+'</option>';
                         })
                         $("#shi").append(shihtml);	
                   })
         		}
         	})
       })


     //查询县 第三级
        $("#shi").change(function(){ 

           var xianHtml="<option value='请选择'>请选择县/区</option>";       
           var $shival=$(this).val();
           $("#zhen").find("option").remove();
           $("#xian").find("option").remove();
     
        $.ajax({
        	type:"post",
        	url:"https://restapi.amap.com/v3/config/district?subdistrict=1&key="+amapkey+"&keywords="+$shival,
          dataType:"jsonp",
          success:function(data){
            	$.each(data.districts,function(i,countyvalue){
            		 $.each(countyvalue.districts,function(countyi,county){
            		    	xianHtml+='<option value="'+ county.name+'">'+ county.name+'</option>';           			
            	  	})
            	$("#xian").append(xianHtml);
            	})
            }
        })    
     })

    //遍历第四级
    $("#xian").change(function(){
       $("#zhen").find("option").remove();
      	var $zhenval=$(this).val();
        var xiangHtml="<option value='请选择'>请选择镇/街道</option>";
        $.ajax({
        	type:"post",
        	url:"https://restapi.amap.com/v3/config/district?subdistrict=1&key="+amapkey+"&keywords="+$zhenval,
        	dataType:"jsonp",
        	success:function(data){
        		$.each(data.districts,function(i,streetvalue){
                   $.each(streetvalue.districts,function(streetI,street){
                   	 xiangHtml+='<option value="'+ street.name+'">'+ street.name+'</option>';  
                })
            $("#zhen").append(xiangHtml);      
        		});
        	}
        }) 
    })
	})
</script>
</body>
</html>

  1. 配置自己的key

var amapkey="";  //高德地图的开发key 填写自己的即可。

帮助部分:

  1. 代码使用中文命名
    在这里插入图片描述
    sheng,shi等都使用了熟悉的中文命名,如果不习惯可以修改成自己的嘛,并且查看阿里巴巴开发手册
    在这里插入图片描述
    2. 方法我认为不是最简单的
    因为我不是特别的精通JavaScript,如果你有更快捷的方法,大佬求赐教

看完上面还没明白?

可以加我的一些联系方式,来一起研究
QQ: 2501521908
Mail: 2501521908@qq.com

你老公叫小轲么
关注
专栏目录
jquery四级联动
11-29
jquery 四级联动,支持多种浏览器,应用在应用系统中，经典
关于jquery（ajax）web四级联动
05-29
使用jquery中的ajax在web项目中实现四级联动，选择地区。使用jquery中的ajax在web项目中实现四级联动，选择地区。使用jquery中的ajax在web项目中实现四级联动，选择地区。
jquery 实现四级联动
热门推荐
Cherry
07-21 1万+
                                                先上效果图，最近项目中出现四级联动，因为花费很长时间去弄这个东西，所以整理一下，方便以后的使用。       对于四级联动，因为开始并没有去弄明白他是怎么回事，开始是在js中定义一个四维数组，然后不停的去遍历这个四维数组，导致变量越来越多，根本没法控制，同时代码的可读性很差。所以现在采用前台根据...
获取高德地图的四级地址
碧海擎天逍遥仙
10-09 1556
sqlCREATE TABLE `pc_mdc_address` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'ID', `pid` bigint(50) NOT NULL COMMENT '父ID', `city_code` varchar(50) DEFAULT '' COMMENT '城市编码', `ad_code` va
JS框架_(JQuery.js)高德地图api
weixin_30299539的博客
07-31 522
百度云盘　　传送门　　密码:ko30 高德地图api效果 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m...
jQuery采用高德地图api开发实例特效代码
03-20
综上所述，这个实例涵盖了jQuery库的使用、高德地图API的集成、地图交互功能的开发等多个知识点，是学习Web地图开发和JavaScript交互的一个良好实践案例。通过理解和分析这个实例，开发者可以掌握如何将地图服务与...
jQuery四级联动菜单代码
04-07
jQuery四级联动菜单代码是一款多级联动下拉框菜单选择特效，带搜索和添加菜单功能。
jQuery高德地图api开发实例代码
06-10
在本实例中，我们主要探讨如何使用jQuery与高德地图API进行交互，创建一个功能丰富的地图应用。这个应用允许用户通过输入搜索路径，利用右键拖拽来放大地图，以及用左键点击来测量路径。以下是对每个部分的详细解释...
jquery省市区街道四级联动菜单
02-27
**jQuery省市区街道四级联动菜单详解** 在网页开发中，我们常常需要实现一种效果：当用户选择一个省级行政区划时，对应的市、区/县、街道等信息会自动下拉更新，这种交互被称为四级联动菜单。这个“jQuery省市区...
jQuery省市区街道四级联动菜单.zip
07-11
jQuery省市区街道四级联动菜单基于jquery.citys.js制作，二级、三级、四级多种联动菜单示例，扩展显示行政区划第四级(街道)信息，有调用方法，options参数等中文注释。
jQuery移动端动态四级联动选择面板
08-12
jQuery移动端动态四级联动选择面板
全国省市区乡镇街道四级行政区json数据，含城市电话区号，行政编码，高德地图坐标系准确的中心点和边界线。
09-30
全国省市区乡镇街道四级行政区json数据，含城市电话区号，行政编码，高德地图坐标系准确的中心点和边界线。
四级联动地址
08-07
全国省市区四级地址 文件含义 文件名称 省份数据 provinces.json 城市数据 cities.json 区县数据 areas.json 乡镇（街道）数据 streets.json “省份、城市” 二级联动数据 pc.json “省份、城市” 二级联动数据（带编码） pc-code.json “省份、城市、区县” 三级联动数据 pca.json “省份、城市、区县” 三级联动数据（带编码） pca-code.json “省份、城市、区县、乡镇” 四级联动数据 pcas.json “省份、城市、区县、乡镇” 四级联动数据（带编码）
jquery写的城市四级联动菜单
04-10
jquery写的城市四级联动菜单，当然数据可能不是很完善，如果您拥有更全的城市信息，可以修改js里面的内容，使其完美
jQuery采用高德地图api开发实例.zip
07-04
jQuery采用高德地图api开发实例是一款输入搜索路径，右键拖拽放大，左键点击测量路径。
jQuery城市四级联动
weixin_30421809的博客
04-18 142
今天做了个城市四级联动jquery方法，简单实现了调用数据的城市四级联动所需要的功能。此方法仅供逻辑思维参考，请勿直接复制，可能与实际功能不符。 　　　　　　　　　　<tr class="qrows"> <th class="hidden-sm col-md-1 borderd"> 区域 </th>...
jQuery四级联动选择商品分类js特效
ICode联盟
01-06 245
下载地址 一款类似淘宝发布宝贝商品分类四级联动菜单选择代码，适用于商品分类检索条件代码。 dd:
vue elementUI 高德地图接口实现省市区街道四级联动
qq_42661587的博客
06-09 3389
先看看效果图： 这里我使用的是直接get方式去高德去接口数据的方式，所以不需要在vue安装任何东西。 这里不要使用代理跨域，直接把高德地址放上去就行了，key是高德注册的key，后面的参数是用来传递subdistrict（显示的级数）keywords（按地区名称查询）。 HTML这一块需要注意的事街道这里的可以，因为高德街道这一块的adcode是重复的，所以这里不能讲adcode设置为key了，不然会报错key值重复。 data中定义变量： 初始化省数据： 监听省的下拉框：
html+jquery使用高德地图api
最新发布
weixin_52648390的博客
04-19 835
记录一下使用高德地图的经历，高德的api写的很详细，示例贴到本地都是可以用的。文章写的不是很清晰，建议看官方文档，这里只粘贴了一部分代码。注册弹框中选择你需要的服务平台，我是分别添加了Web端(JS API)和Web服务。这个功能实现效果就是你传入起点、终点及出行方式，页面跳转到高德官方地图，并展示路线。登录高德开放平台——点击应用管理下的我的应用——添加key。新建html，引入jQuery和高德，Web端要写安全密钥。起点和终点传的都是地理编码，上面有地址转换编码的方法。的地址，接口参数写的很详细。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值