先看看效果图:

vue elementUI 高德地图接口实现省市区街道四级联动

这里我使用的是直接get方式去高德去接口数据的方式,所以不需要在vue安装任何东西。

vue elementUI 高德地图接口实现省市区街道四级联动

这里不要使用代理跨域,直接把高德地址放上去就行了,key是高德注册的key,后面的参数是用来传递subdistrict(显示的级数)keywords(按地区名称查询)。

vue elementUI 高德地图接口实现省市区街道四级联动

HTML这一块需要注意的事街道这里的可以,因为高德街道这一块的adcode是重复的,所以这里不能讲adcode设置为key了,不然会报错key值重复。

data中定义变量:

vue elementUI 高德地图接口实现省市区街道四级联动

初始化省数据:

vue elementUI 高德地图接口实现省市区街道四级联动

监听省的下拉框:

注释掉的部分是使用一次性获取四级的数据,但是由于浏览器获取数据量过大而导致超时的问题,所以就不推荐直接取到4级了,如果你是要做三级联动,可以用注释掉的代码,会更加简单一点不需要频繁调用接口。

vue elementUI 高德地图接口实现省市区街道四级联动

市数据:

vue elementUI 高德地图接口实现省市区街道四级联动

区数据和街道(街道不需要监听了):

vue elementUI 高德地图接口实现省市区街道四级联动

然后就OK了!!!!!!!!!!!

相关文章:

  • 2022-12-23
  • 2021-07-02
  • 2021-06-14
  • 2021-07-26
  • 1970-01-01
  • 2021-12-04
  • 2021-11-04
猜你喜欢
  • 2021-05-27
  • 2021-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-15
相关资源
相似解决方案