一，前言

需求：省市区三级联动下拉选择出数据并地图显示位置，地图上选择定位位置三级联动反显出省市区；

准备：

1.需要全国地址完整(省市区-地区code)的 area.json，

百度云盘下载地址提取码：ufyz (另本已上传csdn资源，设置了几次0c币，但是系统一直自动给改要4-8C币，已弃)

2. 地址定位这里用的是高德api 故需要申请高德web开发相关申请配置见这篇。

二，实现

1.utils.js 自用工具类

@utils/area/index 是标题一内放置的 area-index.js 资源，自己项目使用自己的资源路径

/*** @param arr 城市地址三级联动选择器，选择出的code 数组* @return 返回解析出 省-市-区/县 的名字 addObj对象*/
import AreaData from '@/utils/area/index'
export function areaCode2AreaName(arr) {// console.log('areaCode2AreaName()-code名转地址', arr)const [provinceCode, cityCode, countyCode] = arrlet _province, _city, _countyconst _areaData = AreaDatalet addObj = {}if (_areaData.length > 0) {for (const k in _areaData) {if (_areaData[k].value === provinceCode) {_province = _areaData[k].labelconst _areaData2 = _areaData[k].childrenfor (const k2 in _areaData2) {if (_areaData2[k2].value === cityCode) {_city = _areaData2[k2].labelconst _areaData3 = _areaData2[k2].childrenfor (const k3 in _areaData3) {if (_areaData3[k3].value === countyCode) {_county = _areaData3[k3].labelbreak}}}}}}}addObj = {province: _province,city: _city,county: _county}return addObj
}
/*** @param arr 城市地址三级联动选择器，选择出的code 数组* @return 返回解析出 省-市-区/县 的code编码 addObj对象*/
export function areaName2AreaCode(arr) {// console.log('areaName2AreaCode()-地址名转code', arr)const [provinceName, cityName, countyName] = arrlet _province, _city, _countyconst _areaData = AreaDatalet addObj = {}if (_areaData.length > 0) {for (const k in _areaData) {if (_areaData[k].label === provinceName) {_province = _areaData[k].value// console.log('areaName2AreaCode()-地址名转code-_province', _province)// 重庆市 500000   ,北京市 110000 ,  上海市 310000,  天津市 120000, 香港特别行政区  810000,  澳门特别行政区 820000if (_province === '500000' || _province === '110000' || _province === '310000' || _province === '120000'|| _province === '810000' || _province === '820000') {const _areaData2 = _areaData[k].childrenlet now_cityName = provinceNameif (provinceName === '香港特别行政区' || provinceName === '澳门特别行政区') {now_cityName = provinceName.replace('特别行政区', '')}for (const k2 in _areaData2) {if (_areaData2[k2].label === now_cityName) {_city = _areaData2[k2].valueconst _areaData3 = _areaData2[k2].childrenfor (const k3 in _areaData3) {// 兼容处理 countyName输入的值中有 XX新区 及 XX区 这种值不确定 不匹配问题let countCountyName = ''if (countyName.indexOf('新区') !== -1) {countCountyName = countyName.substring(0, countyName.indexOf('新区'))} else {countCountyName = countyName}if (_areaData3[k3].label.indexOf(countCountyName) !== -1) {_county = _areaData3[k3].valuebreak}}}}} else {const _areaData2 = _areaData[k].childrenfor (const k2 in _areaData2) {if (_areaData2[k2].label === cityName) {_city = _areaData2[k2].valueconst _areaData3 = _areaData2[k2].childrenfor (const k3 in _areaData3) {// 兼容处理 countyName输入的值中有 XX新区 及 XX区 这种值不确定 不匹配问题let countCountyName = ''if (countyName.indexOf('新区') !== -1) {countCountyName = countyName.substring(0, countyName.indexOf('新区'))} else {countCountyName = countyName}if (_areaData3[k3].label.indexOf(countCountyName) !== -1) {_county = _areaData3[k3].valuebreak}}}}}}}}addObj = {provinceCode: _province,cityCode: _city,countyCode: _county}return addObj
}// String: null => ''
export function stringNullToValue(string) {let nowStr = ''if (string) {nowStr = string}return nowStr
}

2. positionLocation.js 高德地图定位经纬度转地址

/*** CopyRight zh* 2020/03/31* positionLocation.js* version : 1.0.0*/
'use strict'
// import Vue from 'vue'
// import AMap from 'AMap'
// Vue.use(AMap)
import Axios from 'axios'
/*** @param address 详细地址  省-市-区* @param callback 回调函数 返回resData* @return resData: {*    status: true, // 是否成功data: null, // 返回数据message: null, // 返回提示信息*  }* */
export function getLngLat(address, callback) {console.log('getLngLat()-',address)const resData = {status: true,data: null,message: null,}// 根据地址获取经纬度Axios.get('https://restapi.amap.com/v3/geocode/geo?key=这里放自己的高德密钥&&address='+address).then(res=>{if(res.status ===200 && res.data.info==='OK'){let resp = res.data.geocodes[0]// console.error("getLngLat()-resp", resp)if(resp){resData.data = resp.location.split(',')resData.message = '获取经纬度成功'callback(resData)}else {console.error("不存在该位置信息")resData.status = falseresData.message = '不存在该位置信息'callback(resData)}}else {console.error("获取经纬度信息失败")resData.status = falseresData.message = '获取经纬度信息失败'callback(resData)}})
}/*** @param longitude  经度 英文：longitude  114.044815* @param latitude 纬度 英文：latitude   22.687373* @param callback 回调函数 返回resData* @return resData: {*    status: true, // 是否成功data: null, // 返回数据message: null, // 返回提示信息*  }* */
export function getLocation(longitude, latitude, callback){// const that = thisconst location = longitude + ',' + latitudeconsole.log('getLocation()-location',location)const resData = {status: true,data: null,message: null,}const nowLocation = {lat: '', // 纬度lon: '', // 经度province: '', // 省city: '', // 市district: '', // 区 县street: '', // 街道、乡镇nowPlace: '', // 省-市-区addressDetail: '' // 详细地址}// 根据经纬度获取地址Axios.get('https://restapi.amap.com/v3/geocode/regeo?key=这里放自己的高德密钥&location='+location).then(res=>{if(res.status === 200 && res.data.info==='OK'){let resp= res.data.regeocode.addressComponentconst addressDetails = res.data.regeocode.formatted_address// console.log('getLocation()-resp',resp)if(resp){nowLocation.province = resp.provinceif(resp.province ==='上海市'||resp.province ==='重庆市'||resp.province ==='天津市'||resp.province ==='北京市'||resp.province ==='香港特别行政区'||resp.province ==='澳门特别行政区'){if (resp.province === '香港特别行政区' || resp.province === '澳门特别行政区') {nowLocation.city = resp.province.replace('特别行政区', '')} else {nowLocation.city = resp.province}} else {nowLocation.city = resp.city}// 如果例如： 东莞市-虎门镇 返回信息 district 值为 [], 则 东莞市 区级值  用 township街道值 进行回填// console.log('resp.district instanceof Array', resp.district instanceof Array)if (resp.district instanceof Array && resp.district.length === 0) {nowLocation.district = resp.township} else {nowLocation.district = resp.district}nowLocation.street = resp.townshipnowLocation.nowPlace = nowLocation.province + nowLocation.city + nowLocation.districtnowLocation.lon = longitudenowLocation.lat = latitudenowLocation.addressDetail = resp.neighborhood.nameif (resp.district !== false){nowLocation.addressDetail = addressDetails.split(resp.district)[1]}else if(resp.city !== false){nowLocation.addressDetail = addressDetails.split(resp.city)[1]}resData.data = nowLocationresData.message = '获取位置信息成功'callback(resData)} else {console.error("不存在该位置信息")resData.status = falseresData.message = '不存在该位置信息'callback(resData)}}else {console.error("获取地址信息失败")resData.status = falseresData.message = '获取地址信息失败'callback(resData)}})
}

3.这里是页面vue

<template><!-- 省市区三级联动 --><el-form label-width="110px" ref="objEditFrom" :model="objEditData"><el-form-item label="发生地点" prop="selectedOptionsStart"><el-cascaderclass="w184"placeholder="任意搜索地区":options="areaData"filterablechange-on-select@change="startAddressChange"v-model="objEditData.selectedOptionsStart"></el-cascader></el-form-item><el-form-item label="街道/乡镇" prop="street"><el-input type="text" clearable v-model="objEditData.street" class="w184" @change="detailChange"></el-input></el-form-item><el-form-item label="详细地址" prop="addressDetails"><el-input type="text" clearable v-model="objEditData.addressDetails" class="w184" @change="detailChange"></el-input></el-form-item>
</el-from><!-- 地图 --><div><!-- 地图容器 --><div id="amap-container" style="width:400px;height: 300px;"></div>
</div>
</template>
<style>
.w184{width: 184px!important;
}
</style><script>import Area from "@/utils/area/index";import * as Utils from "@/utils/index";import * as LocationAMap from "@/utils/positionLocation/positionLocation";export default {data() {return {objEditData: {selectedOptionsStart: ["", "", ""], // 省市区 编码addressDetails: null, // 出险地点 详细地址longitude: null,latitude: null},areaData: Area, // 省-市-区三级联动选择selectArea: {province: '',city: '',county: '',street: '',addressDetails: ''},}},mounted() {// this.initFunc();},methods: {initFunc() {const that = this;const province = '广东省'const city = '深圳市'const county = '南山区'const street= '西乡街道'const addressDetails = '详细地址'// 解析 省市区 编码const { provinceCode, cityCode, countyCode } = Utils.areaName2AreaCode([province, city, county]);// 如果是编辑 已有 省 市 区 数据进行设置 三级联动显示对应 省市区that.objEditData = {selectedOptionsStart: [provinceCode, cityCode, countyCode],addressDetails}that.selectArea = {province, city, county, street, addressDetails}that.getLngLatFunc(); // 地址转经纬度},initMap(longitude, latitude,zoom) {console.log("initMap()初始化");const that = this;// const newV = [116.397559, 39.89621]//   center: new AMap.LngLat(nowLog, nowLat),const nowLog = longitude || 116.397559;const nowLat = latitude || 39.89621;let zoomdata= zoom?zoom:11const mapObj = new AMap.Map("amap-container", {center: [nowLog, nowLat],zoom: zoomdata // 初始化地图时显示的地图放大等级});// console.log("initMap()初始化-nowLog", nowLog, nowLat);const markerNow = {name: "",lnglat: [nowLog, nowLat]};createMarkerFunc(markerNow);// 地图点击事件const showInfoClick = function(e) {console.log("showInfoClick()触发了地图click事件-e");// e.lnglat.getLng(),e.lnglat.getLat()const markerItem = {name: "",lnglat: [e.lnglat.getLng(), e.lnglat.getLat()]};createMarkerFunc(markerItem);setBoundsFunc(markerItem);that.getLocationFunc(e.lnglat.getLng(), e.lnglat.getLat());};// 监听 地图点击事件// if (!that.makeInputDisabled) {//   mapObj.on("click", showInfoClick);// }mapObj.on("click", showInfoClick);// -------------自定义方法------------------// 指定当前地图显示范围，参数bounds为指定的范围function setBoundsFunc(markerItem) {console.log("setBoundsFunc()");const start = [Number(markerItem.lnglat[0]) - 0.01,Number(markerItem.lnglat[1]) - 0.01];const end = [Number(markerItem.lnglat[0]) + 0.01,Number(markerItem.lnglat[1]) + 0.01];const mybounds = new AMap.Bounds(start, end);mapObj.setBounds(mybounds);}// 创建Marker方法function createMarkerFunc(markerItem) {console.log("createMarker()");mapObj.clearMap(); // 清除地图覆盖物// 创建一个 Marker 实例：const marker = new AMap.Marker({map: mapObj,position: new AMap.LngLat(markerItem.lnglat[0], markerItem.lnglat[1])// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]});// 将创建的点标记添加到已有的地图实例：mapObj.add(marker);}},//  街道/ 乡镇 、详细地址 修改时detailChange() {this.selectArea.street = this.objEditData.streetthis.selectArea.addressDetails = this.objEditData.addressDetailsthis.getLngLatFunc()},// 通过 地址 获取 经纬度getLngLatFunc() {const that = this;
const { province, city, county, street, addressDetails } = that.selectArea;const address = Utils.stringNullToValue(province) + Utils.stringNullToValue(city) + Utils.stringNullToValue(county) + Utils.stringNullToValue(street) + Utils.stringNullToValue(addressDetails);LocationAMap.getLngLat(address, function(resData) {if (resData.status) {console.log("getLngLatFunc()-", resData.data);that.LngLat = resData.data;that.objEditData.longitude = that.LngLat[0];that.objEditData.latitude = that.LngLat[1];// 解决 地图 异步渲染问题that.$nextTick(() => {that.initMap(that.objEditData.longitude, that.objEditData.latitude);});} else {that.$message({message: resData.message,type: "warning",duration: 2000});}});},// 通过经纬度获取 地址getLocationFunc(longitude, latitude) {const that = this;// const location = longitude + ',' + latitude// console.log('getLocationFunc()-location',location)LocationAMap.getLocation(longitude, latitude, function(resData) {if (resData.status) {const { province, city, district, addressDetail, street } = resData.data;that.selectArea = {province: province,city: city,county: district,street: street,addressDetails: addressDetail};// 解析 省市区 编码const {provinceCode,cityCode,countyCode} = Utils.areaName2AreaCode([province, city, district]);that.objEditData.selectedOptionsStart = [provinceCode,cityCode,countyCode];that.objEditData.addressDetails = addressDetail;that.objEditData.longitude = longitude;that.objEditData.latitude = latitude;} else {this.$message({message: resData.message,type: "warning",duration: 2000});}});},// 三级连选 起运地地址startAddressChange(val) {const selectArr = val;console.log("startAddressChange()-val", val);this.selectArea = Utils.areaCode2AreaName(selectArr);this.getLngLatFunc();}}}
</script>

4.实现效果截图

选择省市区或 详细地址-地图显示标记位置

地图选择定位-反显省市区三级联动+详细地址

省-市-区三级联动选择地址 + 地图定位(高德api定位获取位置信息)，互相联动显示相关推荐

Android 高德地图在华为手机上获取位置信息失败
昨天遇到一个特别奇怪的bug,华为手机获取高德定位信息失败,调试打印数据后发现 location.getAddress()这个获取值为空,之前一直选择高精度模式,但是获取不到位置信息 //设置定位模式 ...
android地图获取坐标位置,android 百度地图根据得到的经纬度获取位置信息
满意答案回复了sfdzyy 2015.07.03 采纳率:57% 等级:7 已帮助:658人 private GeoCoder mSearch = null; // 搜索模块 // 初始化搜索 ...
根据百度地图经纬度获取位置信息
/*** 根据百度地图经纬度获取位置信息 **/ public class BaiduMapUtils {// 百度地图秘钥static String ak = "此处添加你的百度地图秘钥& ...
小程序通过API获取位置信息微信API 百度地图API
博客简介本篇博客介绍如何调用微信API获取经纬度,如何调用百度地图API获取实物位置微信API获取经纬度信息百度地图API获取实物位置微信小程序获取经纬度微信提供了获取当前设备经纬度的API ...
微信公众号，JS-SDK获取位置信息，并调起第三方地图App导航
微信公众号关联网页获取位置信息,可以参照<微信公众平台技术文档>-> 微信JS-SDK说明文档,官方链接地址:https://mp.weixin.qq.com/wiki?t=reso ...
vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
uni-app获取位置信息(经纬度转换地址信息)
uniapp获取位置信息,获取到的信息为经纬度,再通过转换成地址信息 1.使用uni.getLocation()获取位置信息 2.下载qqmap-wx-jssdk.js插件插件下载地址 3.使用腾讯位 ...
C#net6实现Linux系统下修改IP地址、修改系统时间、获取内存信息、获取磁盘信息、重启系统
C#net6实现Linux系统下修改IP地址.修改系统时间.获取内存信息.获取磁盘信息.重启系统背景项目背景实现思路代码实现背景随着微软.net core的出现,C#程序实现跨平台不在困难 ...
【Uni-App】用 uView 组件库中的u-picker 实现地区的省-市-区三级联动确认回显
目录一:准备工作二:json文件数据例1 例2 三:先做个按钮做弹窗显示四:使用组件五:用到的变量六:初始化数据七:数据变更时的方法八:点击确认时的方法九:数据的回填这是选中效果 ...
uniapp 用 uView 组件库中的u-picker 实现地区的省-市-区三级联动
组件的引入就不多赘述了直接看使用方法地址我是引入的json文件数据结构大概是这个样子例1 例2 1,先做个按钮做弹窗显示 <u-cell :border="true" ...

省-市-区三级联动选择地址 + 地图定位(高德api定位获取位置信息)，互相联动显示

一，前言

二，实现

1.utils.js 自用工具类

2. positionLocation.js 高德地图定位经纬度转地址

3.这里是页面vue

4.实现效果截图

省-市-区三级联动选择地址 + 地图定位(高德api定位获取位置信息)，互相联动显示相关推荐

最新文章

热门文章

省-市-区三级联动选择地址 + 地图定位(高德api定位获取位置信息)，互相联动显示

一，前言

二，实现

1.utils.js 自用工具类

2. positionLocation.js 高德地图定位 经纬度转地址

3.这里是 页面vue

4.实现效果截图

省-市-区三级联动选择地址 + 地图定位(高德api定位获取位置信息)，互相联动显示相关推荐

最新文章

热门文章

2. positionLocation.js 高德地图定位经纬度转地址

3.这里是页面vue