react 中使用高德地图获取省市区列表

第一步：引入地图api js ，地图容器id，初始化

 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=bca3c8db7e16261dadc9b149bb686e71"></script>

<div id="add-notice-container" name="container" tabIndex="0"/>

第二步：

// 获取省市列表信息及当前城市地区代码
export const getMapDate = (_this, id, num) => { // id: 地图容器，num：表示省市区列表即 1:省，2:市，3:区，4:街道// let provinceList = [];// let cityCode = null;_this.setState({mapObj: new window.AMap.Map(id)}, () => {// 获取省区列表_this.state.mapObj.plugin('AMap.DistrictSearch', () => {var districtSearch = new window.AMap.DistrictSearch({level: 'country',subdistrict: num // 1:省，2:市，3:区，4:街道});districtSearch.search('中国', (status, result) => {               _this.setState({provinceList: result.districtList[0].districtList.sort((a, b) => {return a.adcode - b.adcode})});});});// 获取当前城市地区代码// _this.state.mapObj.plugin('AMap.CitySearch', () => {//     var citySearch = new window.AMap.CitySearch();//     citySearch.getLocalCity((status, result) => {//         if (status === 'complete' && result.info === 'OK') {//             cityCode = result.adcode;//         }//     })// })});
};

根据省市区查找对应的省市区name

// 根据省市区id 查找 省市区name
export const pCAName = (provinceList, adcode) => {const optionsOfCity = [{value: "0", label: "全国"}];//省，市选项生成const optionsOfArea = [{value: "0", label: "全国"}];//省，市，区选项生成let currentCityName = [];let currentCity = [];let currentAreaName = [];let currentArea = [];if (provinceList.length) {        provinceList.forEach((item) => {let childrenCity = [];let childrenArea = [];if (item.districtList) {item.districtList.forEach((subItem) => {let subChildrenArea = [];if (subItem.districtList) {subItem.districtList.forEach((thirdItem) => {subChildrenArea.push({value: thirdItem.adcode, label: thirdItem.name});if (thirdItem.adcode === String(adcode)) {currentArea = [item.adcode, subItem.adcode, thirdItem.adcode];currentAreaName = [item.name, subItem.name, thirdItem.name];}})}if (subItem.adcode === String(adcode)) {currentCity = [item.adcode, subItem.adcode];currentCityName = [item.name, subItem.name];}childrenCity.push({value: subItem.adcode, label: subItem.name});childrenArea.push({value: subItem.adcode, label: subItem.name, children: subChildrenArea});})}optionsOfCity.push({value: item.adcode, label: item.name, children: childrenCity});optionsOfArea.push({value: item.adcode, label: item.name, children: childrenArea});})}return { optionsOfCity, currentCity, currentCityName, optionsOfArea, currentArea, currentAreaName };
};

react 中使用高德地图获取省市区列表相关推荐

在vue中使用高德地图获取坐标与地址信息(包含点击+搜索)
首先注册登陆高德地图 https://lbs.amap.com/ 划过头像里面有个应用管理点开进入到应用管理打开我的应用选择创建应用然后按照要求填写内容,切记一定要选择web端(JS API) ...
vue项目中使用高德地图获取用户当前位置信息
项目背景是用vue开发的小程序,需要获取当前用户的地理位置,折腾了好久终于弄好了,今天分享给大家,话不多说,let's go! 第一步:在index.html页面引入高德地图 <script t ...
使用高德地图获取省市区信息
最近添加需求需要获取国内省市区三级信息,使用高德开放平台,可以顺利的获取到当前国内省市区信息,如图所示: 操作流程: 先创建web应用,记录应用Key,绑定Web服务 https://console. ...
react 逆地理高德地图_react中使用高德地图的原生API
干货,无话 1.react-create-app,创建新react项目: 2.npm install react-amap,引入高德地图的封装: 3.编写组件index.js: import Reac ...
高德，百度地图获取省市区
近期,遇到一个根据定位获取省市区的需求,前期用了加载百度地图js的方式,经过实验,https在部分ios手机上都获取不到省市区.后来发现是百度地图API中getCurrentPosition方法提示错 ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
技巧 | 在R语言中使用高德地图的API进行地理/逆地理编码（地址与经纬度的相互转换）...
高德地图和百度地图都提供了坐标拾取系统,通过坐标查询或坐标反查操作可以查询一个地址对应的经纬度或经纬度对应的地址名称.但是,手动查询的方式效率很低,也不能进行批量查询. 本篇就来介绍在R语言中调用高德 ...
Java从高德地图获取全国地铁站数据
Java从高德地图获取全国地铁站数据. 数据来源(高德地图):http://map.amap.com/subway/index.html?&4401 采集代码 /*** 从高德地图地铁线路同步 ...

react 中使用高德地图获取省市区列表

第一步：引入地图api js ，地图容器id，初始化

第二步：

根据省市区查找对应的省市区name

react 中使用高德地图获取省市区列表相关推荐

最新文章

热门文章

react 中使用高德地图 获取省市区列表

第一步：引入地图api js ，地图容器id，初始化

第二步：

根据省市区 查找对应的省市区name

react 中使用高德地图 获取省市区列表相关推荐

最新文章

热门文章

react 中使用高德地图获取省市区列表

根据省市区查找对应的省市区name

react 中使用高德地图获取省市区列表相关推荐