移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址

效果图：

在public文件夹下的index.html文件中head标签下加上script标签如下：

<script type="text/javascript">window._AMapSecurityConfig = {serviceHost: '/_AMapService',securityJsCode: '8875d368900906c0f23d6adb7dhsj'  //转译key//这个key是假的，换成你自己在高德申请的，申请的是web端（js Api）}</script>

安装相应插件

yarn add store  //存储作用
yarn add vant
yarn add jquery

一、自定义GoMap.vue组件

<template><div class="page" :style="{ height: pageHeight + 'px' }"><van-nav-bar title="所在位置" @click-left="onClickLeft" class="topNavFix"><template #left><van-icon name="arrow-left" color="#333752" size="18" /></template><template #right><van-button type="info" @click="getInfo">确定</van-button></template></van-nav-bar><div id="search"><van-searchv-model="queryKey":show-action="isSearch"shape="round"placeholder="请输入您的地址"@focus="searchFocus"@blur="searchBlur"><template slot="label"><div class="address-search__label" @click="changeCity"><span>{{ city || "定位中..." }}</span><iclass="address-search__icon van-icon van-icon-arrow-down"style="font-size: 16px"><!----></i></div></template><template slot="action" v-if="isSearch"><span @click="cancelSearch()">取消</span></template></van-search></div><div id="map"></div><div class="address-map__pois__title"><div class="areaStyl">附近位置</div><div class="areaBtn"><!-- <van-button type="info" @click="getInfo">信息提交</van-button> --></div></div><divclass="address-map__pois van-cell-group"v-if="!isSearch && !isShowSelectCity"><divclass="address-map__poi van-cell van-cell--borderless"v-for="(item, index) in nearPostion":key="index"@click="selectAddr(item)"><iclass="van-icon van-icon-location van-cell__left-icon":class="{ active: selectPosition.id == item.id }"><!----></i><div class="van-cell__title"><span>{{ item.name }}</span><div class="van-cell__label">{{ item.address }}</div></div></div><div class="loading" v-show="selectPostionLoading"><van-loading type="spinner" color="#1989fa" /></div><!-- <div class="address-map__poi van-cell van-cell--borderless"><i class="van-icon van-icon-location van-cell__left-icon"></i><div class="van-cell__title"><span>深圳安迪妈妈公寓</span><div class="van-cell__label">科技园深南花园c栋(地铁口旁)</div></div></div> --></div><div class="searchRes" v-show="isSearch"><div class="searchHistory" v-if="!queryKey"><div class="title" v-if="searchHistory.length"><span>历史搜索</span><van-icon @click="clearSearchHistory()" class="del" name="delete" /></div><div class="serchHistory-list" v-if="searchHistory.length"><spanv-for="(item, index) in searchHistory":key="index"@click="selechHistory(item)">{{ item }}</span></div><!-- 空搜索历史 --><van-emptyv-if="!searchHistory.length"image="search"description="暂无历史搜索"/></div><div class="searchRes-list" v-if="queryKey"><div class="searchRes-list-box" v-if="searchResList.length"><divclass="item"v-for="(item, index) in searchResList":key="index"@click="selectSearchAddr(item)"><div class="name">{{ item.name }}</div><div class="addr">{{ item.district }}{{ item.address }}</div></div></div><van-emptyv-if="!searchResList.length && noSearchData"image="search"description="暂无搜索结果"/></div></div><!-- 选择城市 --><transition name="van-slide-right" v-if="isShowSelectCity"><divstyle="position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;z-index: 1500;"><SelectCity@getCity="getCity"@closeCity="closeCity"@showRit="showRit":faRit="rightArea"></SelectCity></div></transition></div>
</template><script>
import { loadJs } from "@/utils/mapfn.js";
import SelectCity from "@/components/SelectCity";
import { Toast } from 'vant';
//便捷存取本地存储工具
import storejs from "store";
export default {components: { SelectCity },data() {return {rightArea: '',pageHeight: window.innerHeight,map: "",loaction: [], //lng,latcity: "",isShowSelectCity: false,nearPostion: [],selectPosition: {},selectPostionLoading: false,isSearch: false,queryKey: "",searchHistory: [], //搜索历史记录searchResList: [], //搜索记录noSearchData: false,timer: "",isToast: '',positionInfo: {},mapShow: false};},watch: {queryKey: function (val) {clearTimeout(this.timer);this.timer = setTimeout(() => {if (window.AMap) {//判断地图是否初始化window.AMap.plugin("AMap.AutoComplete", () => {let autoOptions = {city: this.city || "全国", //city 限定城市，默认全国pageSize: 20, // 单页显示结果条数children: 0, //不展示子节点数据pageIndex: 1, //页码extensions: "base", //返回基本地址信息};// 实例化AutoCompletelet autoComplete = new window.AMap.AutoComplete(autoOptions);// 根据关键字进行搜索autoComplete.search(val, (status, result) => {// 搜索成功时，result即是对应的匹配数据this.noSearchData = false;console.log(result);if (result.info == "OK") {console.log(result);this.searchResList = result.tips;if (result.tips && !result.tips.length) {this.searchResList = [];this.noSearchData = true;}} else {this.searchResList = [];this.noSearchData = true;}});});}}, 300);}},async mounted() {// await this.init();},methods: {showRit(val) {this.rightArea = val},onClickLeft() {this.$emit("showChange", this.mapShow);},getInfo() {this.$emit("getAreaInfo", this.positionInfo);},async init() {// Toast.loading({//   message: '初始化中...',//   forbidClick: true,// });await loadJs("https://webapi.amap.com/maps?v=2.0&key=d12ec89124d64af8ee33273e3dba23b3",
//用你们自己申请的key，这个key我里面加了随机数字async () => {// this.selectPostionLoading = true;await loadJs("https://webapi.amap.com/ui/1.1/main.js", () => {window.AMapUI.loadUI(["misc/PositionPicker", "misc/PoiPicker"],(PositionPicker, PoiPicker) => {//获取定位this.getLoction(async () => {//拖拽选址this.positionPicker(PositionPicker, PoiPicker);});//实力化搜索// await this.autoInput();});});});},//创建地图createMap() {this.selectPostionLoading = true;this.map = new window.AMap.Map("map", {resizeEnable: true, //是否监控地图容器尺寸变化zoom: 16,viewMode: "3D",features: ["bg", "road", "building", "point"],center: this.loaction,});Toast.clear()},//获取定位getLoction(callback) {window.AMap.plugin("AMap.Geolocation", () => {let geolocation = new window.AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 10000, //超过10秒后停止定位，默认：5sbuttonPosition: "RB", //定位按钮的停靠位置buttonOffset: new window.AMap.Pixel(0, 0), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：trueextensions: "all",});geolocation.getCurrentPosition((status, result) => {//定位成功if (status == "complete") {//获取定位坐标this.loaction = [result.position.lng, result.position.lat];//创建地图this.createMap();this.map.addControl(geolocation);} else {//定位失败this.loaction = [0, 0];this.createMap();this.map.addControl(geolocation);console.log('888', result)this.$toast("定位失败,原因：" + result.message);}if (typeof callback === "function") {callback();}});});},//拖拽选址positionPicker(PositionPicker, PoiPicker) {console.log("PoiPicker", PoiPicker);let imgurl = require("@/assets/imgs/dingwei.png")var positionPicker = new PositionPicker({mode: "dragMap",map: this.map,iconStyle: {//自定义外观// https://img.yzcdn.cn/public_files/2020/03/04/32a548551986a2c3c22ef3018eb7a9af.pngurl: imgurl,size: [35, 42], //要显示的点大小，将缩放图片ancher: [11, 40], //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置},});positionPicker.on("success", (positionResult) => {this.nearPostion = [];this.selectPostionLoading = true;this.city =positionResult.regeocode.addressComponent.city ||positionResult.regeocode.addressComponent.province; //citysetTimeout(() => {//延时在加载出来有更好的体验效果console.log("positionres", positionResult);this.nearPostion = positionResult.regeocode.pois;this.selectPosition = positionResult.regeocode.pois[0];this.selectPostionLoading = false;this.positionInfo = positionResult}, 300);});positionPicker.on("fail", (positionResult) => {console.log("positionResult", positionResult);this.$toast("定位失败");});// var onModeChange = function (e) {//   console.log("e", e);//   positionPicker.setMode(e.target.value);// };positionPicker.start();},//选择地址selectAddr(addr) {this.selectPosition = JSON.parse(JSON.stringify(addr));this.$toast(`我选择了${addr.name}`);this.map.setZoomAndCenter(16, this.selectPosition.location); //同时设置地图中心点和层级},searchFocus() {if (storejs.get("searchHistoryList")) {this.searchHistory = storejs.get("searchHistoryList");}this.isSearch = true;this.rightArea = ''},searchBlur() {this.rightArea = ''},cancelSearch() {this.isSearch = false;this.queryKey = "";this.searchResList = [];},//删除历史记录clearSearchHistory() {this.$dialog.confirm({title: "确认删除历史记录？",message: "删除后不可恢复",}).then(() => {storejs.set("searchHistoryList", []);this.searchHistory = [];}).catch(() => {// on cancel});},selechHistory(item) {this.queryKey = item;},selectSearchAddr(item) {if (storejs.get("searchHistoryList")) {let searchHistory = storejs.get("searchHistoryList");searchHistory.push(item.name);searchHistory = [...new Set(searchHistory)];storejs.set("searchHistoryList", searchHistory);} else {let searchHistory = [];searchHistory.push(item.name);storejs.set("searchHistoryList", searchHistory);}this.$toast(`我选择了${item.name}`);this.isSearch = false;this.queryKey = "";this.searchResList = [];this.loaction = [item.location.lng, item.location.lat];this.map.setZoomAndCenter(16, this.loaction); //同时设置地图中心点和层级},changeCity() {this.isShowSelectCity = true;this.rightArea = '3'},async getCity(cityObj) {this.city = cityObj.name;this.loaction = [cityObj.lng, cityObj.lat];this.isShowSelectCity = false;this.map.setZoomAndCenter(16, this.loaction); //同时设置地图中心点和层级},closeCity() {this.isShowSelectCity = false;}//实例化search// autoInput() {//   AMap.plugin("AMap.Autocomplete", () => {//     // 实例化Autocomplete//     var autoOptions = {//       city: this.city,//     };//     let autoComplete = new AMap.Autocomplete(autoOptions);//     autoComplete.search(this.queryKey, (status, result) => {//       // 搜索成功时，result即是对应的匹配数据//       console, log("resulte", result);//     });//   });// },},
};
</script><style lang="less" scoped>
.topNavFix {width: 100%;position: fixed;left: 0;top: 0;background: #fff;z-index: 8888;::v-deep .van-nav-bar__title {color: #333;font-weight: 700;}::v-deep .van-button--info {background-color: #fff;border: 1px solid #fff;color: #005dff;font-size: 14px;padding: 0;}
}
.page {display: flex;flex-direction: column;position: relative;padding-top: 46px;box-sizing: border-box;#search {width: 100%;position: absolute;z-index: 1001;width: 100%;top: 40px;right: 0;.address-search__label {font-size: 12px;color: #323233;display: flex;align-items: center;.address-search__icon {margin-left: 5px;color: #c8c9cc;}span {max-width: 70px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}}#map {height: 275px;width: 100%;}.address-map__pois__title {display: flex;justify-content: space-between;align-items: center;height: 40px;background-color: #fff;padding: 0 12px;text-align: left;.areaStyl {font-size: 12px;color: #969799;}.areaBtn {.van-button--info {height: 32px;width: 80px;font-size: 12px;background-color: #005dff;border: 1px solid #005dff;border-radius: 4px;}}}.address-map__pois {flex: 1;overflow-y: auto;padding: 0 12px;position: relative;-webkit-overflow-scrolling: touch;.loading {position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: #f7f8fa;}&::-webkit-scrollbar {width: 2px;height: 5px;}&::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {border-radius: 999px;border: 0px solid transparent;}&::-webkit-scrollbar-track {box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.2) inset;}&::-webkit-scrollbar-thumb {min-height: 20px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(100, 100, 100, 0.5) inset;}&::-webkit-scrollbar-corner {background: transparent;}.van-cell {position: relative;display: -webkit-box;display: -webkit-flex;display: flex;box-sizing: border-box;width: 100%;padding: 10px 16px;overflow: hidden;color: #323233;font-size: 14px;line-height: 24px;background-color: #fff;&.address-map__poi {background: #f7f8fa;border-radius: 8px;padding: 16px 8px;line-height: 20px;.van-icon-location {color: #dddee0;line-height: 1.3;&.active {color: #ee0a24;}}.van-cell__label {color: #969799;}}&.address-map__poi:not(:last-child) {margin-bottom: 8px;}}}.searchRes {position: absolute;width: 100%;height: 100%;background: #fff;z-index: 1000;padding-top: 54px;box-sizing: border-box;top: 0;left: 0;right: 0;.searchHistory {height: 100%;padding: 0px 12px;box-sizing: border-box;.title {margin-top: 36px;height: 25px;display: flex;width: 100%;justify-content: space-between;align-items: center;span {font-size: 12px;color: #000;font-weight: 600;}.del {color: #666;font-size: 14px;}}.serchHistory-list {width: 100%;padding-top: 15px;box-sizing: border-box;display: flex;flex-wrap: wrap;span {padding: 5px 8px;background: #eee;color: #333;font-size: 12px;max-width: 90px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-right: 8px;line-height: 1;border-radius: 3px;margin-bottom: 10px;}}}.searchRes-list {height: 100%;padding: 30px 12px 0;box-sizing: border-box;.searchRes-list-box {height: 100%;overflow-y: auto;-webkit-overflow-scrolling: touch;.item {padding: 5px 0;border-bottom: 1px solid #f1f1f1;.name {font-size: 14px;color: #000;font-weight: 600;line-height: 30px;}.addr {color: #666;font-size: 13px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}&:last-child {border-bottom: 0px;}}&::-webkit-scrollbar {display: none;}}}}
}
</style>

二、自定义SelectCity.vue组件

<template><!-- :style="{ height: pageHeight + 'px' }" --><div class="page" style="height: 100%"><div id="search"><van-searchv-model="queryKey"show-actionshape="round"placeholder="请输入城市名或者拼音"@focus="searchFocus"@blur="searchBlur"><template slot="action"><span @click="cancelSearch()">取消</span></template></van-search></div><div class="position" v-if="!isSearch"><div class="title">当前定位</div><div class="result"><span class="left" @click="selectCity(cityData, 'position')"><van-icon name="location" /><span class="cityName"><span v-if="cityLoading" style="color: #666; font-size: 13px">定位中...</span><span v-else>{{ city || "定位失败" }}</span></span></span><span class="right" @click="getLoction()">重新定位</span></div></div><divclass="bar"style="height: 5px; background: gainsboro"v-if="!isSearch"></div><divclass="index-list"v-if="!isSearch":class="faRit == '1' ? 'topShow' : ''"><van-index-bar :index-list="indexListName"><div v-for="(value, key, index) in indexList" :key="index"><van-index-anchor :index="key == '#' ? '热门城市' : key" /><van-cellv-for="(el, i) in value":key="i":title="el.name"@click="selectCity(el, 'index')"/></div></van-index-bar></div><div class="search-list" v-if="isSearch"><div class="searchRes-list-box" v-if="searchResList.length"><divclass="item"v-for="(item, index) in searchResList":key="index"@click="selectCity(item, 'index')"><div class="name">{{ item.name }}</div></div></div><van-emptyv-if="!searchResList.length && noSearchData"image="search"description="暂无搜索结果"/></div></div>
</template><script>
import { loadJs } from "@/utils/mapfn.js";
import storejs from "store";
import $ from "jquery";
export default {data() {return {pageHeight: window.innerHeight,indexListOr: {}, //原始数据indexListName: [],indexList: {},city: "",cityData: {},cityLoading: true,isSearch: false,searchResList: [], //搜索结果queryKey: "",timer: "",map: "",loaction: [], //lng,latnearPostion: [],selectPosition: {},selectPostionLoading: false,searchHistory: [], //搜索历史记录noSearchData: false,AMap: ""};},props: ['faRit'],watch: {queryKey: function (val) {clearTimeout(this.timer);this.timer = setTimeout(() => {if (val) {this.isSearch = true;let queryKey = val.toUpperCase();this.searchResList = [];this.indexListOr.forEach((el) => {if (el.name.indexOf(queryKey) != -1 ||el.spell.toUpperCase().indexOf(queryKey) != -1) {this.searchResList.push(el);}});} else {this.isSearch = false;this.searchResList = [];}}, 300);}},mounted() {this.init();},methods: {async init() {await this.getCityList();await this.getLoction();},searchFocus() {this.$emit('showRit', '1')//   this.isSearch = true;},searchBlur() {this.$emit('showRit', '2')},//获取定位getLoction() {loadJs("https://webapi.amap.com/maps?v=2.0&key=d12ec89124d64572372e34434e3dba23b3&plugin=AMap.CitySearch",
//用你们自己申请的key，这个key我里面加了随机数字() => {//实例化城市查询类this.AMap = window.AMap;this.cityLoading = true;let citysearch = new this.AMap.CitySearch();//自动获取用户IP，返回当前城市citysearch.getLocalCity((status, result) => {console.log("城市定位", result);if (status === "complete" && result.info === "OK") {if (result && result.city && result.bounds) {let obj = {name: result.city,lat: result.bounds.northEast.lat - 0.2,lng: result.bounds.northEast.lng - 0.2};this.cityData = obj;this.city = result.city;}} else {this.$toast("定位失败");}this.cityLoading = false;});});},async getCityList() {let res = await $.getJSON("/city.json", {});console.log("res", Object.values(res));let data = Object.values(res);let letter_reg = /^[A-Z]$/;let list = new Array();this.indexListOr = data; //保存一份原始数据，用来搜索使用for (let i = 0; i < data.length; i++) {// 添加 # 分组，用来 存放 首字母不能 转为 大写英文的 数据list["#"] = new Array();// 首字母 转 大写英文let letter = data[i]["spell"].substr(0, 1).toUpperCase();// 是否 大写 英文 字母if (!letter_reg.test(letter)) {letter = "#";}// 创建 字母 分组if (!(letter in list)) {list[letter] = new Array();}// 字母 分组 添加 数据list[letter].push(data[i]);}// 转换 格式 进行 排序；let resault = new Array();for (let key in list) {resault.push({letter: key,list: list[key],});}resault.sort(function (x, y) {return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);});// # 号分组 放最后// let last_arr = resault[0];// resault.splice(0, 1);// resault.push(last_arr);// 转换 数据 格式let json_sort = {};for (var i = 0; i < resault.length; i++) {json_sort[resault[i].letter] = resault[i].list;}json_sort["#"].push({adcode: "110000",name: "北京市",spell: "Beijing",lng: 116.405285,lat: 39.904989,areaCode: "010",}); //添加热门城市北京json_sort["#"].push({adcode: "440300",name: "深圳市",spell: "Shenzhen",lng: 114.085947,lat: 22.547,areaCode: "0755",}); //添加热门城市深圳json_sort["#"].push({adcode: "310000",name: "上海市",spell: "Shanghai",lng: 121.472644,lat: 31.231706,areaCode: "021",}); //添加热门城市上海this.indexListName = Object.keys(json_sort);this.indexList = json_sort;console.log(json_sort);},// 选择城市selectCity(row, type) {if (type == "index") {this.$emit("getCity", row);}if (type == "position") {this.$emit("getCity", row);}},//创建地图createMap() {this.selectPostionLoading = true;this.map = new this.AMap.Map("map", {resizeEnable: true, //是否监控地图容器尺寸变化zoom: 16,viewMode: "3D",features: ["bg", "road", "building", "point"],center: this.loaction,});},//拖拽选址positionPicker(PositionPicker, PoiPicker) {console.log(PoiPicker);let imgurl = require("@/assets/imgs/dingwei.png")var positionPicker = new PositionPicker({mode: "dragMap",map: this.map,iconStyle: {//自定义外观url: imgurl, //图片地址size: [35, 42], //要显示的点大小，将缩放图片ancher: [11, 40], //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置},});positionPicker.on("success", (positionResult) => {this.nearPostion = [];this.selectPostionLoading = true;this.city = positionResult.regeocode.addressComponent.city; //citysetTimeout(() => {//延时在加载出来有更好的体验效果console.log("positionres", positionResult);this.nearPostion = positionResult.regeocode.pois;this.selectPosition = positionResult.regeocode.pois[0];this.selectPostionLoading = false;}, 300);});positionPicker.on("fail", (positionResult) => {console.log(positionResult);this.$toast("定位失败");});// var onModeChange = function(e) {//   console.log("e", e);//   positionPicker.setMode(e.target.value);// };positionPicker.start();},//选择地址selectAddr(addr) {this.selectPosition = JSON.parse(JSON.stringify(addr));this.$toast(`我选择了${addr.name}`);},cancelSearch() {this.isSearch = false;this.queryKey = "";this.searchResList = [];this.$emit('closeCity', '')},//删除历史记录clearSearchHistory() {this.$dialog.confirm({title: "确认删除历史记录？",message: "删除后不可恢复",}).then(() => {storejs.set("searchHistoryList", []);this.searchHistory = [];}).catch(() => {// on cancel});},selechHistory(item) {this.queryKey = item;},selectSearchAddr(item) {if (storejs.get("searchHistoryList")) {let searchHistory = storejs.get("searchHistoryList");searchHistory.push(item.name);searchHistory = [...new Set(searchHistory)];storejs.set("searchHistoryList", searchHistory);//去重} else {let searchHistory = [];searchHistory.push(item.name);storejs.set("searchHistoryList", searchHistory);}this.$toast(`我选择了${item.name}`);this.isSearch = false;this.queryKey = "";this.searchResList = [];},changeCity() {this.$toast("选择城市待开发");},//实例化search// autoInput() {//   AMap.plugin("AMap.Autocomplete", () => {//     // 实例化Autocomplete//     var autoOptions = {//       city: this.city,//     };//     let autoComplete = new AMap.Autocomplete(autoOptions);//     autoComplete.search(this.queryKey, (status, result) => {//       // 搜索成功时，result即是对应的匹配数据//       console, log("resulte", result);//     });//   });// },},
};
</script><style lang="less" scoped>
.page {display: flex;flex-direction: column;position: relative;#search {width: 100%;flex-shrink: 0;.address-search__label {font-size: 12px;color: #323233;display: flex;align-items: center;.address-search__icon {margin-left: 5px;color: #c8c9cc;}}}.position {height: 55px;flex-shrink: 0;width: 100%;padding: 0px 12px;box-sizing: border-box;padding-bottom: 10px;background: #fff;.title {line-height: 24px;color: #666;font-size: 12px;}.result {display: flex;justify-content: space-between;align-items: center;.left {display: flex;align-items: center;i {font-size: 12px;margin-right: 6px;}.cityName {font-size: 14px;color: #000;font-weight: 600;}}.right {font-size: 14px;color: cornflowerblue;}}}.topShow {::v-deep .van-index-bar__sidebar {top: 77%;}}.index-list {flex: 1;overflow-y: auto;background: #fff;width: 100%;-webkit-overflow-scrolling: touch;&::-webkit-scrollbar {width: 2px;height: 5px;}&::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {border-radius: 999px;border: 0px solid transparent;}&::-webkit-scrollbar-track {box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.2) inset;}&::-webkit-scrollbar-thumb {min-height: 20px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(100, 100, 100, 0.5) inset;}&::-webkit-scrollbar-corner {background: transparent;}}.search-list {flex: 1;overflow-y: auto;background: #fff;width: 100%;padding: 30px 12px 0;.searchRes-list-box {height: 100%;overflow-y: auto;-webkit-overflow-scrolling: touch;.item {padding: 5px 0;border-bottom: 1px solid #f1f1f1;.name {font-size: 14px;color: #000;font-weight: 600;line-height: 30px;}.addr {color: #666;font-size: 13px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}&:last-child {border-bottom: 0px;}}&::-webkit-scrollbar {display: none;}}}
}
</style>

三、在utils文件夹下自定义异步加载css、js文件mapfn.js

// 异步加载css文件
export const includeCss = function (filename) {var head = document.getElementsByTagName("head")[0];var link = document.createElement("link");link.href = filename;link.rel = "stylesheet";link.type = "text/css";head.appendChild(link);
}// 异步加载js文件
export const loadJs = function (libUrl, callback, libName) {if (window[libName]) {if (typeof callback === 'function') callback();}let head = document.getElementsByTagName("head")[0];let script = document.createElement("script");let isCallback = false;script.type = "text/javascript";script.src = libUrl;if (typeof callback == "function") {script.onload = script.onreadystatechange = function () {if (!this.readyState ||this.readyState === "loaded" ||this.readyState === "complete") {if (isCallback === false && typeof callback === 'function') {isCallback = true;callback();}script.onload = script.onreadystatechange = null;}};}head.appendChild(script);
}

四、在public文件夹下新建获取城市的json文件city.json

{"110000": {"adcode": "110000","name": "北京市","spell": "Beijing","lng": 116.405285,"lat": 39.904989,"areaCode": "010"},"120000": {"adcode": "120000","name": "天津市","spell": "Tianjin","lng": 117.190182,"lat": 39.125596,"areaCode": "022"},"130100": {"adcode": "130100","name": "石家庄市","spell": "Shijiazhuang","lng": 114.502461,"lat": 38.045474,"areaCode": "0311"},"130200": {"adcode": "130200","name": "唐山市","spell": "Tangshan","lng": 118.175393,"lat": 39.635113,"areaCode": "0315"},"130300": {"adcode": "130300","name": "秦皇岛市","spell": "Qinhuangdao","lng": 119.586579,"lat": 39.942531,"areaCode": "0335"},"130400": {"adcode": "130400","name": "邯郸市","spell": "Handan","lng": 114.490686,"lat": 36.612273,"areaCode": "0310"},"130500": {"adcode": "130500","name": "邢台市","spell": "Xingtai","lng": 114.508851,"lat": 37.0682,"areaCode": "0319"},"130600": {"adcode": "130600","name": "保定市","spell": "Baoding","lng": 115.482331,"lat": 38.867657,"areaCode": "0312"},"130700": {"adcode": "130700","name": "张家口市","spell": "Zhangjiakou","lng": 114.884091,"lat": 40.811901,"areaCode": "0313"},"130800": {"adcode": "130800","name": "承德市","spell": "Chengde","lng": 117.939152,"lat": 40.976204,"areaCode": "0314"},"130900": {"adcode": "130900","name": "沧州市","spell": "Cangzhou","lng": 116.857461,"lat": 38.310582,"areaCode": "0317"},"131000": {"adcode": "131000","name": "廊坊市","spell": "Langfang","lng": 116.713873,"lat": 39.529244,"areaCode": "0316"},"131100": {"adcode": "131100","name": "衡水市","spell": "Hengshui","lng": 115.665993,"lat": 37.735097,"areaCode": "0318"},"140100": {"adcode": "140100","name": "太原市","spell": "Taiyuan","lng": 112.549248,"lat": 37.857014,"areaCode": "0351"},"140200": {"adcode": "140200","name": "大同市","spell": "Datong","lng": 113.295259,"lat": 40.09031,"areaCode": "0352"},"140300": {"adcode": "140300","name": "阳泉市","spell": "Yangquan","lng": 113.583285,"lat": 37.861188,"areaCode": "0353"},"140400": {"adcode": "140400","name": "长治市","spell": "Changzhi","lng": 113.113556,"lat": 36.191112,"areaCode": "0355"},"140500": {"adcode": "140500","name": "晋城市","spell": "Jincheng","lng": 112.851274,"lat": 35.497553,"areaCode": "0356"},"140600": {"adcode": "140600","name": "朔州市","spell": "Shuozhou","lng": 112.433387,"lat": 39.331261,"areaCode": "0349"},"140700": {"adcode": "140700","name": "晋中市","spell": "Jinzhong","lng": 112.736465,"lat": 37.696495,"areaCode": "0354"},"140800": {"adcode": "140800","name": "运城市","spell": "Yuncheng","lng": 111.003957,"lat": 35.022778,"areaCode": "0359"},"140900": {"adcode": "140900","name": "忻州市","spell": "Xinzhou","lng": 112.733538,"lat": 38.41769,"areaCode": "0350"},"141000": {"adcode": "141000","name": "临汾市","spell": "Linfen","lng": 111.517973,"lat": 36.08415,"areaCode": "0357"},"141100": {"adcode": "141100","name": "吕梁市","spell": "Lvliang","lng": 111.134335,"lat": 37.524366,"areaCode": "0358"},"150100": {"adcode": "150100","name": "呼和浩特市","spell": "Hohhot","lng": 111.670801,"lat": 40.818311,"areaCode": "0471"},"150200": {"adcode": "150200","name": "包头市","spell": "Baotou","lng": 109.840405,"lat": 40.658168,"areaCode": "0472"},"150300": {"adcode": "150300","name": "乌海市","spell": "Wuhai","lng": 106.825563,"lat": 39.673734,"areaCode": "0473"},"150400": {"adcode": "150400","name": "赤峰市","spell": "Chifeng","lng": 118.956806,"lat": 42.275317,"areaCode": "0476"},"150500": {"adcode": "150500","name": "通辽市","spell": "Tongliao","lng": 122.263119,"lat": 43.617429,"areaCode": "0475"},"150600": {"adcode": "150600","name": "鄂尔多斯市","spell": "Ordos","lng": 109.99029,"lat": 39.817179,"areaCode": "0477"},"150700": {"adcode": "150700","name": "呼伦贝尔市","spell": "Hulunber","lng": 119.758168,"lat": 49.215333,"areaCode": "0470"},"150800": {"adcode": "150800","name": "巴彦淖尔市","spell": "Bayan Nur","lng": 107.416959,"lat": 40.757402,"areaCode": "0478"},"150900": {"adcode": "150900","name": "乌兰察布市","spell": "Ulanqab","lng": 113.114543,"lat": 41.034126,"areaCode": "0474"},"152200": {"adcode": "152200","name": "兴安盟","spell": "Hinggan","lng": 122.070317,"lat": 46.076268,"areaCode": "0482"},"152500": {"adcode": "152500","name": "锡林郭勒盟","spell": "Xilin Gol","lng": 116.090996,"lat": 43.944018,"areaCode": "0479"},"152900": {"adcode": "152900","name": "阿拉善盟","spell": "Alxa","lng": 105.706422,"lat": 38.844814,"areaCode": "0483"},"210100": {"adcode": "210100","name": "沈阳市","spell": "Shenyang","lng": 123.429096,"lat": 41.796767,"areaCode": "024"},"210200": {"adcode": "210200","name": "大连市","spell": "Dalian","lng": 121.618622,"lat": 38.91459,"areaCode": "0411"},"210300": {"adcode": "210300","name": "鞍山市","spell": "Anshan","lng": 122.995632,"lat": 41.110626,"areaCode": "0412"},"210400": {"adcode": "210400","name": "抚顺市","spell": "Fushun","lng": 123.921109,"lat": 41.875956,"areaCode": "0413"},"210500": {"adcode": "210500","name": "本溪市","spell": "Benxi","lng": 123.770519,"lat": 41.297909,"areaCode": "0414"},"210600": {"adcode": "210600","name": "丹东市","spell": "Dandong","lng": 124.383044,"lat": 40.124296,"areaCode": "0415"},"210700": {"adcode": "210700","name": "锦州市","spell": "Jinzhou","lng": 121.135742,"lat": 41.119269,"areaCode": "0416"},"210800": {"adcode": "210800","name": "营口市","spell": "Yingkou","lng": 122.235151,"lat": 40.667432,"areaCode": "0417"},"210900": {"adcode": "210900","name": "阜新市","spell": "Fuxin","lng": 121.648962,"lat": 42.011796,"areaCode": "0418"},"211000": {"adcode": "211000","name": "辽阳市","spell": "Liaoyang","lng": 123.18152,"lat": 41.269402,"areaCode": "0419"},"211100": {"adcode": "211100","name": "盘锦市","spell": "Panjin","lng": 122.06957,"lat": 41.124484,"areaCode": "0427"},"211200": {"adcode": "211200","name": "铁岭市","spell": "Tieling","lng": 123.844279,"lat": 42.290585,"areaCode": "0410"},"211300": {"adcode": "211300","name": "朝阳市","spell": "Chaoyang","lng": 120.451176,"lat": 41.576758,"areaCode": "0421"},"211400": {"adcode": "211400","name": "葫芦岛市","spell": "Huludao","lng": 120.856394,"lat": 40.755572,"areaCode": "0429"},"220100": {"adcode": "220100","name": "长春市","spell": "Changchun","lng": 125.3245,"lat": 43.886841,"areaCode": "0431"},"220200": {"adcode": "220200","name": "吉林市","spell": "Jilin","lng": 126.55302,"lat": 43.843577,"areaCode": "0432"},"220300": {"adcode": "220300","name": "四平市","spell": "Siping","lng": 124.370785,"lat": 43.170344,"areaCode": "0434"},"220400": {"adcode": "220400","name": "辽源市","spell": "Liaoyuan","lng": 125.145349,"lat": 42.902692,"areaCode": "0437"},"220500": {"adcode": "220500","name": "通化市","spell": "Tonghua","lng": 125.936501,"lat": 41.721177,"areaCode": "0435"},"220600": {"adcode": "220600","name": "白山市","spell": "Baishan","lng": 126.427839,"lat": 41.942505,"areaCode": "0439"},"220700": {"adcode": "220700","name": "松原市","spell": "Songyuan","lng": 124.823608,"lat": 45.118243,"areaCode": "0438"},"220800": {"adcode": "220800","name": "白城市","spell": "Baicheng","lng": 122.841114,"lat": 45.619026,"areaCode": "0436"},"222400": {"adcode": "222400","name": "延边朝鲜族自治州","spell": "Yanbian","lng": 129.513228,"lat": 42.904823,"areaCode": "1433"},"230100": {"adcode": "230100","name": "哈尔滨市","spell": "Harbin","lng": 126.642464,"lat": 45.756967,"areaCode": "0451"},"230200": {"adcode": "230200","name": "齐齐哈尔市","spell": "Qiqihar","lng": 123.953486,"lat": 47.348079,"areaCode": "0452"},"230300": {"adcode": "230300","name": "鸡西市","spell": "Jixi","lng": 130.975966,"lat": 45.300046,"areaCode": "0467"},"230400": {"adcode": "230400","name": "鹤岗市","spell": "Hegang","lng": 130.277487,"lat": 47.332085,"areaCode": "0468"},"230500": {"adcode": "230500","name": "双鸭山市","spell": "Shuangyashan","lng": 131.157304,"lat": 46.643442,"areaCode": "0469"},"230600": {"adcode": "230600","name": "大庆市","spell": "Daqing","lng": 125.11272,"lat": 46.590734,"areaCode": "0459"},"230700": {"adcode": "230700","name": "伊春市","spell": "Yichun","lng": 128.899396,"lat": 47.724775,"areaCode": "0458"},"230800": {"adcode": "230800","name": "佳木斯市","spell": "Jiamusi","lng": 130.361634,"lat": 46.809606,"areaCode": "0454"},"230900": {"adcode": "230900","name": "七台河市","spell": "Qitaihe","lng": 131.015584,"lat": 45.771266,"areaCode": "0464"},"231000": {"adcode": "231000","name": "牡丹江市","spell": "Mudanjiang","lng": 129.618602,"lat": 44.582962,"areaCode": "0453"},"231100": {"adcode": "231100","name": "黑河市","spell": "Heihe","lng": 127.499023,"lat": 50.249585,"areaCode": "0456"},"231200": {"adcode": "231200","name": "绥化市","spell": "Suihua","lng": 126.99293,"lat": 46.637393,"areaCode": "0455"},"232700": {"adcode": "232700","name": "大兴安岭地区","spell": "Da Hinggan Ling","lng": 124.711526,"lat": 52.335262,"areaCode": "0457"},"310000": {"adcode": "310000","name": "上海市","spell": "Shanghai","lng": 121.472644,"lat": 31.231706,"areaCode": "021"},"320100": {"adcode": "320100","name": "南京市","spell": "Nanjing","lng": 118.767413,"lat": 32.041544,"areaCode": "025"},"320200": {"adcode": "320200","name": "无锡市","spell": "Wuxi","lng": 120.301663,"lat": 31.574729,"areaCode": "0510"},"320300": {"adcode": "320300","name": "徐州市","spell": "Xuzhou","lng": 117.184811,"lat": 34.261792,"areaCode": "0516"},"320400": {"adcode": "320400","name": "常州市","spell": "Changzhou","lng": 119.946973,"lat": 31.772752,"areaCode": "0519"},"320500": {"adcode": "320500","name": "苏州市","spell": "Suzhou","lng": 120.619585,"lat": 31.299379,"areaCode": "0512"},"320600": {"adcode": "320600","name": "南通市","spell": "Nantong","lng": 120.864608,"lat": 32.016212,"areaCode": "0513"},"320700": {"adcode": "320700","name": "连云港市","spell": "Lianyungang","lng": 119.178821,"lat": 34.600018,"areaCode": "0518"},"320800": {"adcode": "320800","name": "淮安市","spell": "Huai'an","lng": 119.021265,"lat": 33.597506,"areaCode": "0517"},"320900": {"adcode": "320900","name": "盐城市","spell": "Yancheng","lng": 120.139998,"lat": 33.377631,"areaCode": "0515"},"321000": {"adcode": "321000","name": "扬州市","spell": "Yangzhou","lng": 119.421003,"lat": 32.393159,"areaCode": "0514"},"321100": {"adcode": "321100","name": "镇江市","spell": "Zhenjiang","lng": 119.452753,"lat": 32.204402,"areaCode": "0511"},"321200": {"adcode": "321200","name": "泰州市","spell": "Taizhou","lng": 119.915176,"lat": 32.484882,"areaCode": "0523"},"321300": {"adcode": "321300","name": "宿迁市","spell": "Suqian","lng": 118.293328,"lat": 33.945154,"areaCode": "0527"},"330100": {"adcode": "330100","name": "杭州市","spell": "Hangzhou","lng": 120.153576,"lat": 30.287459,"areaCode": "0571"},"330200": {"adcode": "330200","name": "宁波市","spell": "Ningbo","lng": 121.549792,"lat": 29.868388,"areaCode": "0574"},"330300": {"adcode": "330300","name": "温州市","spell": "Wenzhou","lng": 120.672111,"lat": 28.000575,"areaCode": "0577"},"330400": {"adcode": "330400","name": "嘉兴市","spell": "Jiaxing","lng": 120.750865,"lat": 30.762653,"areaCode": "0573"},"330500": {"adcode": "330500","name": "湖州市","spell": "Huzhou","lng": 120.102398,"lat": 30.867198,"areaCode": "0572"},"330600": {"adcode": "330600","name": "绍兴市","spell": "Shaoxing","lng": 120.582112,"lat": 29.997117,"areaCode": "0575"},"330700": {"adcode": "330700","name": "金华市","spell": "Jinhua","lng": 119.649506,"lat": 29.089524,"areaCode": "0579"},"330800": {"adcode": "330800","name": "衢州市","spell": "Quzhou","lng": 118.87263,"lat": 28.941708,"areaCode": "0570"},"330900": {"adcode": "330900","name": "舟山市","spell": "Zhoushan","lng": 122.106863,"lat": 30.016028,"areaCode": "0580"},"331000": {"adcode": "331000","name": "台州市","spell": "Taizhou","lng": 121.428599,"lat": 28.661378,"areaCode": "0576"},"331100": {"adcode": "331100","name": "丽水市","spell": "Lishui","lng": 119.921786,"lat": 28.451993,"areaCode": "0578"},"340100": {"adcode": "340100","name": "合肥市","spell": "Hefei","lng": 117.283042,"lat": 31.86119,"areaCode": "0551"},"340200": {"adcode": "340200","name": "芜湖市","spell": "Wuhu","lng": 118.376451,"lat": 31.326319,"areaCode": "0553"},"340300": {"adcode": "340300","name": "蚌埠市","spell": "Bengbu","lng": 117.36237,"lat": 32.934037,"areaCode": "0552"},"340400": {"adcode": "340400","name": "淮南市","spell": "Huainan","lng": 117.025449,"lat": 32.645947,"areaCode": "0554"},"340500": {"adcode": "340500","name": "马鞍山市","spell": "Ma'anshan","lng": 118.507906,"lat": 31.689362,"areaCode": "0555"},"340600": {"adcode": "340600","name": "淮北市","spell": "Huaibei","lng": 116.794664,"lat": 33.971707,"areaCode": "0561"},"340700": {"adcode": "340700","name": "铜陵市","spell": "Tongling","lng": 117.816576,"lat": 30.929935,"areaCode": "0562"},"340800": {"adcode": "340800","name": "安庆市","spell": "Anqing","lng": 117.053571,"lat": 30.524816,"areaCode": "0556"},"341000": {"adcode": "341000","name": "黄山市","spell": "Huangshan","lng": 118.317325,"lat": 29.709239,"areaCode": "0559"},"341100": {"adcode": "341100","name": "滁州市","spell": "Chuzhou","lng": 118.316264,"lat": 32.303627,"areaCode": "0550"},"341200": {"adcode": "341200","name": "阜阳市","spell": "Fuyang","lng": 115.819729,"lat": 32.896969,"areaCode": "1558"},"341300": {"adcode": "341300","name": "宿州市","spell": "Suzhou","lng": 116.984084,"lat": 33.633891,"areaCode": "0557"},"341500": {"adcode": "341500","name": "六安市","spell": "Lu'an","lng": 116.507676,"lat": 31.752889,"areaCode": "0564"},"341600": {"adcode": "341600","name": "亳州市","spell": "Bozhou","lng": 115.782939,"lat": 33.869338,"areaCode": "0558"},"341700": {"adcode": "341700","name": "池州市","spell": "Chizhou","lng": 117.489157,"lat": 30.656037,"areaCode": "0566"},"341800": {"adcode": "341800","name": "宣城市","spell": "Xuancheng","lng": 118.757995,"lat": 30.945667,"areaCode": "0563"},"350100": {"adcode": "350100","name": "福州市","spell": "Fuzhou","lng": 119.306239,"lat": 26.075302,"areaCode": "0591"},"350200": {"adcode": "350200","name": "厦门市","spell": "Xiamen","lng": 118.11022,"lat": 24.490474,"areaCode": "0592"},"350300": {"adcode": "350300","name": "莆田市","spell": "Putian","lng": 119.007558,"lat": 25.431011,"areaCode": "0594"},"350400": {"adcode": "350400","name": "三明市","spell": "Sanming","lng": 117.635001,"lat": 26.265444,"areaCode": "0598"},"350500": {"adcode": "350500","name": "泉州市","spell": "Quanzhou","lng": 118.589421,"lat": 24.908853,"areaCode": "0595"},"350600": {"adcode": "350600","name": "漳州市","spell": "Zhangzhou","lng": 117.661801,"lat": 24.510897,"areaCode": "0596"},"350700": {"adcode": "350700","name": "南平市","spell": "Nanping","lng": 118.178459,"lat": 26.635627,"areaCode": "0599"},"350800": {"adcode": "350800","name": "龙岩市","spell": "Longyan","lng": 117.02978,"lat": 25.091603,"areaCode": "0597"},"350900": {"adcode": "350900","name": "宁德市","spell": "Ningde","lng": 119.527082,"lat": 26.65924,"areaCode": "0593"},"360100": {"adcode": "360100","name": "南昌市","spell": "Nanchang","lng": 115.892151,"lat": 28.676493,"areaCode": "0791"},"360200": {"adcode": "360200","name": "景德镇市","spell": "Jingdezhen","lng": 117.214664,"lat": 29.29256,"areaCode": "0798"},"360300": {"adcode": "360300","name": "萍乡市","spell": "Pingxiang","lng": 113.852186,"lat": 27.622946,"areaCode": "0799"},"360400": {"adcode": "360400","name": "九江市","spell": "Jiujiang","lng": 115.992811,"lat": 29.712034,"areaCode": "0792"},"360500": {"adcode": "360500","name": "新余市","spell": "Xinyu","lng": 114.930835,"lat": 27.810834,"areaCode": "0790"},"360600": {"adcode": "360600","name": "鹰潭市","spell": "Yingtan","lng": 117.033838,"lat": 28.238638,"areaCode": "0701"},"360700": {"adcode": "360700","name": "赣州市","spell": "Ganzhou","lng": 114.940278,"lat": 25.85097,"areaCode": "0797"},"360800": {"adcode": "360800","name": "吉安市","spell": "Ji'an","lng": 114.986373,"lat": 27.111699,"areaCode": "0796"},"360900": {"adcode": "360900","name": "宜春市","spell": "Yichun","lng": 114.391136,"lat": 27.8043,"areaCode": "0795"},"361000": {"adcode": "361000","name": "抚州市","spell": "Fuzhou","lng": 116.358351,"lat": 27.98385,"areaCode": "0794"},"361100": {"adcode": "361100","name": "上饶市","spell": "Shangrao","lng": 117.971185,"lat": 28.44442,"areaCode": "0793"},"370100": {"adcode": "370100","name": "济南市","spell": "Jinan","lng": 117.000923,"lat": 36.675807,"areaCode": "0531"},"370200": {"adcode": "370200","name": "青岛市","spell": "Qingdao","lng": 120.369557,"lat": 36.094406,"areaCode": "0532"},"370300": {"adcode": "370300","name": "淄博市","spell": "Zibo","lng": 118.047648,"lat": 36.814939,"areaCode": "0533"},"370400": {"adcode": "370400","name": "枣庄市","spell": "Zaozhuang","lng": 117.557964,"lat": 34.856424,"areaCode": "0632"},"370500": {"adcode": "370500","name": "东营市","spell": "Dongying","lng": 118.4963,"lat": 37.461266,"areaCode": "0546"},"370600": {"adcode": "370600","name": "烟台市","spell": "Yantai","lng": 121.391382,"lat": 37.539297,"areaCode": "0535"},"370700": {"adcode": "370700","name": "潍坊市","spell": "Weifang","lng": 119.107078,"lat": 36.70925,"areaCode": "0536"},"370800": {"adcode": "370800","name": "济宁市","spell": "Jining","lng": 116.587245,"lat": 35.415393,"areaCode": "0537"},"370900": {"adcode": "370900","name": "泰安市","spell": "Tai'an","lng": 117.129063,"lat": 36.194968,"areaCode": "0538"},"371000": {"adcode": "371000","name": "威海市","spell": "Weihai","lng": 122.116394,"lat": 37.509691,"areaCode": "0631"},"371100": {"adcode": "371100","name": "日照市","spell": "Rizhao","lng": 119.461208,"lat": 35.428588,"areaCode": "0633"},"371200": {"adcode": "371200","name": "莱芜市","spell": "Laiwu","lng": 117.677736,"lat": 36.214397,"areaCode": "0634"},"371300": {"adcode": "371300","name": "临沂市","spell": "Linyi","lng": 118.326443,"lat": 35.065282,"areaCode": "0539"},"371400": {"adcode": "371400","name": "德州市","spell": "Dezhou","lng": 116.307428,"lat": 37.453968,"areaCode": "0534"},"371500": {"adcode": "371500","name": "聊城市","spell": "Liaocheng","lng": 115.980367,"lat": 36.456013,"areaCode": "0635"},"371600": {"adcode": "371600","name": "滨州市","spell": "Binzhou","lng": 118.016974,"lat": 37.383542,"areaCode": "0543"},"371700": {"adcode": "371700","name": "菏泽市","spell": "Heze","lng": 115.469381,"lat": 35.246531,"areaCode": "0530"},"410100": {"adcode": "410100","name": "郑州市","spell": "Zhengzhou","lng": 113.665412,"lat": 34.757975,"areaCode": "0371"},"410200": {"adcode": "410200","name": "开封市","spell": "Kaifeng","lng": 114.341447,"lat": 34.797049,"areaCode": "0378"},"410300": {"adcode": "410300","name": "洛阳市","spell": "Luoyang","lng": 112.434468,"lat": 34.663041,"areaCode": "0379"},"410400": {"adcode": "410400","name": "平顶山市","spell": "Pingdingshan","lng": 113.307718,"lat": 33.735241,"areaCode": "0375"},"410500": {"adcode": "410500","name": "安阳市","spell": "Anyang","lng": 114.352482,"lat": 36.103442,"areaCode": "0372"},"410600": {"adcode": "410600","name": "鹤壁市","spell": "Hebi","lng": 114.295444,"lat": 35.748236,"areaCode": "0392"},"410700": {"adcode": "410700","name": "新乡市","spell": "Xinxiang","lng": 113.883991,"lat": 35.302616,"areaCode": "0373"},"410800": {"adcode": "410800","name": "焦作市","spell": "Jiaozuo","lng": 113.238266,"lat": 35.23904,"areaCode": "0391"},"410900": {"adcode": "410900","name": "濮阳市","spell": "Puyang","lng": 115.041299,"lat": 35.768234,"areaCode": "0393"},"411000": {"adcode": "411000","name": "许昌市","spell": "Xuchang","lng": 113.826063,"lat": 34.022956,"areaCode": "0374"},"411100": {"adcode": "411100","name": "漯河市","spell": "Luohe","lng": 114.026405,"lat": 33.575855,"areaCode": "0395"},"411200": {"adcode": "411200","name": "三门峡市","spell": "Sanmenxia","lng": 111.194099,"lat": 34.777338,"areaCode": "0398"},"411300": {"adcode": "411300","name": "南阳市","spell": "Nanyang","lng": 112.540918,"lat": 32.999082,"areaCode": "0377"},"411400": {"adcode": "411400","name": "商丘市","spell": "Shangqiu","lng": 115.650497,"lat": 34.437054,"areaCode": "0370"},"411500": {"adcode": "411500","name": "信阳市","spell": "Xinyang","lng": 114.075031,"lat": 32.123274,"areaCode": "0376"},"411600": {"adcode": "411600","name": "周口市","spell": "Zhoukou","lng": 114.649653,"lat": 33.620357,"areaCode": "0394"},"411700": {"adcode": "411700","name": "驻马店市","spell": "Zhumadian","lng": 114.024736,"lat": 32.980169,"areaCode": "0396"},"419001": {"adcode": "419001","name": "济源市","spell": "Jiyuan","lng": 112.590047,"lat": 35.090378,"areaCode": "1391"},"420100": {"adcode": "420100","name": "武汉市","spell": "Wuhan","lng": 114.298572,"lat": 30.584355,"areaCode": "027"},"420200": {"adcode": "420200","name": "黄石市","spell": "Huangshi","lng": 115.077048,"lat": 30.220074,"areaCode": "0714"},"420300": {"adcode": "420300","name": "十堰市","spell": "Shiyan","lng": 110.785239,"lat": 32.647017,"areaCode": "0719"},"420500": {"adcode": "420500","name": "宜昌市","spell": "Yichang","lng": 111.290843,"lat": 30.702636,"areaCode": "0717"},"420600": {"adcode": "420600","name": "襄阳市","spell": "Xiangyang","lng": 112.144146,"lat": 32.042426,"areaCode": "0710"},"420700": {"adcode": "420700","name": "鄂州市","spell": "Ezhou","lng": 114.890593,"lat": 30.396536,"areaCode": "0711"},"420800": {"adcode": "420800","name": "荆门市","spell": "Jingmen","lng": 112.204251,"lat": 31.03542,"areaCode": "0724"},"420900": {"adcode": "420900","name": "孝感市","spell": "Xiaogan","lng": 113.926655,"lat": 30.926423,"areaCode": "0712"},"421000": {"adcode": "421000","name": "荆州市","spell": "Jingzhou","lng": 112.23813,"lat": 30.326857,"areaCode": "0716"},"421100": {"adcode": "421100","name": "黄冈市","spell": "Huanggang","lng": 114.879365,"lat": 30.447711,"areaCode": "0713"},"421200": {"adcode": "421200","name": "咸宁市","spell": "Xianning","lng": 114.328963,"lat": 29.832798,"areaCode": "0715"},"421300": {"adcode": "421300","name": "随州市","spell": "Suizhou","lng": 113.37377,"lat": 31.717497,"areaCode": "0722"},"422800": {"adcode": "422800","name": "恩施土家族苗族自治州","spell": "Enshi","lng": 109.48699,"lat": 30.283114,"areaCode": "0718"},"429004": {"adcode": "429004","name": "仙桃市","spell": "Xiantao","lng": 113.453974,"lat": 30.364953,"areaCode": "0728"},"429005": {"adcode": "429005","name": "潜江市","spell": "Qianjiang","lng": 112.896866,"lat": 30.421215,"areaCode": "2728"},"429006": {"adcode": "429006","name": "天门市","spell": "Tianmen","lng": 113.165862,"lat": 30.653061,"areaCode": "1728"},"429021": {"adcode": "429021","name": "神农架林区","spell": "Shennongjia","lng": 110.671525,"lat": 31.744449,"areaCode": "1719"},"430100": {"adcode": "430100","name": "长沙市","spell": "Changsha","lng": 112.982279,"lat": 28.19409,"areaCode": "0731"},"430200": {"adcode": "430200","name": "株洲市","spell": "Zhuzhou","lng": 113.151737,"lat": 27.835806,"areaCode": "0733"},"430300": {"adcode": "430300","name": "湘潭市","spell": "Xiangtan","lng": 112.925083,"lat": 27.846725,"areaCode": "0732"},"430400": {"adcode": "430400","name": "衡阳市","spell": "Hengyang","lng": 112.607693,"lat": 26.900358,"areaCode": "0734"},"430500": {"adcode": "430500","name": "邵阳市","spell": "Shaoyang","lng": 111.46923,"lat": 27.237842,"areaCode": "0739"},"430600": {"adcode": "430600","name": "岳阳市","spell": "Yueyang","lng": 113.132855,"lat": 29.37029,"areaCode": "0730"},"430700": {"adcode": "430700","name": "常德市","spell": "Changde","lng": 111.691347,"lat": 29.040225,"areaCode": "0736"},"430800": {"adcode": "430800","name": "张家界市","spell": "Zhangjiajie","lng": 110.479921,"lat": 29.127401,"areaCode": "0744"},"430900": {"adcode": "430900","name": "益阳市","spell": "Yiyang","lng": 112.355042,"lat": 28.570066,"areaCode": "0737"},"431000": {"adcode": "431000","name": "郴州市","spell": "Chenzhou","lng": 113.032067,"lat": 25.793589,"areaCode": "0735"},"431100": {"adcode": "431100","name": "永州市","spell": "Yongzhou","lng": 111.608019,"lat": 26.434516,"areaCode": "0746"},"431200": {"adcode": "431200","name": "怀化市","spell": "Huaihua","lng": 109.97824,"lat": 27.550082,"areaCode": "0745"},"431300": {"adcode": "431300","name": "娄底市","spell": "Loudi","lng": 112.008497,"lat": 27.728136,"areaCode": "0738"},"433100": {"adcode": "433100","name": "湘西土家族苗族自治州","spell": "Xiangxi","lng": 109.739735,"lat": 28.314296,"areaCode": "0743"},"440100": {"adcode": "440100","name": "广州市","spell": "Guangzhou","lng": 113.280637,"lat": 23.125178,"areaCode": "020"},"440200": {"adcode": "440200","name": "韶关市","spell": "Shaoguan","lng": 113.591544,"lat": 24.801322,"areaCode": "0751"},"440300": {"adcode": "440300","name": "深圳市","spell": "Shenzhen","lng": 114.085947,"lat": 22.547,"areaCode": "0755"},"440400": {"adcode": "440400","name": "珠海市","spell": "Zhuhai","lng": 113.552724,"lat": 22.255899,"areaCode": "0756"},"440500": {"adcode": "440500","name": "汕头市","spell": "Shantou","lng": 116.708463,"lat": 23.37102,"areaCode": "0754"},"440600": {"adcode": "440600","name": "佛山市","spell": "Foshan","lng": 113.122717,"lat": 23.028762,"areaCode": "0757"},"440700": {"adcode": "440700","name": "江门市","spell": "Jiangmen","lng": 113.094942,"lat": 22.590431,"areaCode": "0750"},"440800": {"adcode": "440800","name": "湛江市","spell": "Zhanjiang","lng": 110.405529,"lat": 21.195338,"areaCode": "0759"},"440900": {"adcode": "440900","name": "茂名市","spell": "Maoming","lng": 110.919229,"lat": 21.659751,"areaCode": "0668"},"441200": {"adcode": "441200","name": "肇庆市","spell": "Zhaoqing","lng": 112.472529,"lat": 23.051546,"areaCode": "0758"},"441300": {"adcode": "441300","name": "惠州市","spell": "Huizhou","lng": 114.412599,"lat": 23.079404,"areaCode": "0752"},"441400": {"adcode": "441400","name": "梅州市","spell": "Meizhou","lng": 116.117582,"lat": 24.299112,"areaCode": "0753"},"441500": {"adcode": "441500","name": "汕尾市","spell": "Shanwei","lng": 115.364238,"lat": 22.774485,"areaCode": "0660"},"441600": {"adcode": "441600","name": "河源市","spell": "Heyuan","lng": 114.697802,"lat": 23.746266,"areaCode": "0762"},"441700": {"adcode": "441700","name": "阳江市","spell": "Yangjiang","lng": 111.975107,"lat": 21.859222,"areaCode": "0662"},"441800": {"adcode": "441800","name": "清远市","spell": "Qingyuan","lng": 113.036779,"lat": 23.704188,"areaCode": "0763"},"441900": {"adcode": "441900","name": "东莞市","spell": "Dongguan","lng": 113.760234,"lat": 23.048884,"areaCode": "0769"},"442000": {"adcode": "442000","name": "中山市","spell": "Zhongshan","lng": 113.382391,"lat": 22.521113,"areaCode": "0760"},"445100": {"adcode": "445100","name": "潮州市","spell": "Chaozhou","lng": 116.632301,"lat": 23.661701,"areaCode": "0768"},"445200": {"adcode": "445200","name": "揭阳市","spell": "Jieyang","lng": 116.355733,"lat": 23.543778,"areaCode": "0663"},"445300": {"adcode": "445300","name": "云浮市","spell": "Yunfu","lng": 112.044439,"lat": 22.929801,"areaCode": "0766"},"450100": {"adcode": "450100","name": "南宁市","spell": "Nanning","lng": 108.320004,"lat": 22.82402,"areaCode": "0771"},"450200": {"adcode": "450200","name": "柳州市","spell": "Liuzhou","lng": 109.411703,"lat": 24.314617,"areaCode": "0772"},"450300": {"adcode": "450300","name": "桂林市","spell": "Guilin","lng": 110.299121,"lat": 25.274215,"areaCode": "0773"},"450400": {"adcode": "450400","name": "梧州市","spell": "Wuzhou","lng": 111.316229,"lat": 23.472309,"areaCode": "0774"},"450500": {"adcode": "450500","name": "北海市","spell": "Beihai","lng": 109.119254,"lat": 21.473343,"areaCode": "0779"},"450600": {"adcode": "450600","name": "防城港市","spell": "Fangchenggang","lng": 108.345478,"lat": 21.614631,"areaCode": "0770"},"450700": {"adcode": "450700","name": "钦州市","spell": "Qinzhou","lng": 108.624175,"lat": 21.967127,"areaCode": "0777"},"450800": {"adcode": "450800","name": "贵港市","spell": "Guigang","lng": 109.602146,"lat": 23.0936,"areaCode": "1755"},"450900": {"adcode": "450900","name": "玉林市","spell": "Yulin","lng": 110.154393,"lat": 22.63136,"areaCode": "0775"},"451000": {"adcode": "451000","name": "百色市","spell": "Baise","lng": 106.616285,"lat": 23.897742,"areaCode": "0776"},"451100": {"adcode": "451100","name": "贺州市","spell": "Hezhou","lng": 111.552056,"lat": 24.414141,"areaCode": "1774"},"451200": {"adcode": "451200","name": "河池市","spell": "Hechi","lng": 108.062105,"lat": 24.695899,"areaCode": "0778"},"451300": {"adcode": "451300","name": "来宾市","spell": "Laibin","lng": 109.229772,"lat": 23.733766,"areaCode": "1772"},"451400": {"adcode": "451400","name": "崇左市","spell": "Chongzuo","lng": 107.353926,"lat": 22.404108,"areaCode": "1771"},"460100": {"adcode": "460100","name": "海口市","spell": "Haikou","lng": 110.33119,"lat": 20.031971,"areaCode": "0898"},"460200": {"adcode": "460200","name": "三亚市","spell": "Sanya","lng": 109.508268,"lat": 18.247872,"areaCode": "0899"},"460300": {"adcode": "460300","name": "三沙市","spell": "Sansha","lng": 112.34882,"lat": 16.831039,"areaCode": "2898"},"460321": {"adcode": "460321","name": "西沙群岛","spell": "Xisha Islands","lng": 112.025528,"lat": 16.331342,"areaCode": "1895"},"460322": {"adcode": "460322","name": "南沙群岛","spell": "Nansha Islands","lng": 116.749998,"lat": 11.471888,"areaCode": "1891"},"460323": {"adcode": "460323","name": "中沙群岛的岛礁及其海域","spell": "Zhongsha Islands","lng": 117.740071,"lat": 15.112856,"areaCode": "2801"},"460400": {"adcode": "460400","name": "儋州市","spell": "Danzhou","lng": 109.576782,"lat": 19.517486,"areaCode": "0805"},"469001": {"adcode": "469001","name": "五指山市","spell": "Wuzhishan","lng": 109.516662,"lat": 18.776921,"areaCode": "1897"},"469002": {"adcode": "469002","name": "琼海市","spell": "Qionghai","lng": 110.466785,"lat": 19.246011,"areaCode": "1894"},"469005": {"adcode": "469005","name": "文昌市","spell": "Wenchang","lng": 110.753975,"lat": 19.612986,"areaCode": "1893"},"469006": {"adcode": "469006","name": "万宁市","spell": "Wanning","lng": 110.388793,"lat": 18.796216,"areaCode": "1898"},"469007": {"adcode": "469007","name": "东方市","spell": "Dongfang","lng": 108.653789,"lat": 19.10198,"areaCode": "0807"},"469021": {"adcode": "469021","name": "定安县","spell": "Ding'an","lng": 110.323959,"lat": 19.699211,"areaCode": "0806"},"469022": {"adcode": "469022","name": "屯昌县","spell": "Tunchang","lng": 110.102773,"lat": 19.362916,"areaCode": "1892"},"469023": {"adcode": "469023","name": "澄迈县","spell": "Chengmai","lng": 110.007147,"lat": 19.737095,"areaCode": "0804"},"469024": {"adcode": "469024","name": "临高县","spell": "Lingao","lng": 109.687697,"lat": 19.908293,"areaCode": "1896"},"469025": {"adcode": "469025","name": "白沙黎族自治县","spell": "Baisha","lng": 109.452606,"lat": 19.224584,"areaCode": "0802"},"469026": {"adcode": "469026","name": "昌江黎族自治县","spell": "Changjiang","lng": 109.053351,"lat": 19.260968,"areaCode": "0803"},"469027": {"adcode": "469027","name": "乐东黎族自治县","spell": "Ledong","lng": 109.175444,"lat": 18.74758,"areaCode": "2802"},"469028": {"adcode": "469028","name": "陵水黎族自治县","spell": "Lingshui","lng": 110.037218,"lat": 18.505006,"areaCode": "0809"},"469029": {"adcode": "469029","name": "保亭黎族苗族自治县","spell": "Baoting","lng": 109.70245,"lat": 18.636371,"areaCode": "0801"},"469030": {"adcode": "469030","name": "琼中黎族苗族自治县","spell": "Qiongzhong","lng": 109.839996,"lat": 19.03557,"areaCode": "1899"},"500000": {"adcode": "500000","name": "重庆市","spell": "Chongqing","lng": 106.504962,"lat": 29.533155,"areaCode": "023"},"510100": {"adcode": "510100","name": "成都市","spell": "Chengdu","lng": 104.065735,"lat": 30.659462,"areaCode": "028"},"510300": {"adcode": "510300","name": "自贡市","spell": "Zigong","lng": 104.773447,"lat": 29.352765,"areaCode": "0813"},"510400": {"adcode": "510400","name": "攀枝花市","spell": "Panzhihua","lng": 101.716007,"lat": 26.580446,"areaCode": "0812"},"510500": {"adcode": "510500","name": "泸州市","spell": "Luzhou","lng": 105.443348,"lat": 28.889138,"areaCode": "0830"},"510600": {"adcode": "510600","name": "德阳市","spell": "Deyang","lng": 104.398651,"lat": 31.127991,"areaCode": "0838"},"510700": {"adcode": "510700","name": "绵阳市","spell": "Mianyang","lng": 104.741722,"lat": 31.46402,"areaCode": "0816"},"510800": {"adcode": "510800","name": "广元市","spell": "Guangyuan","lng": 105.829757,"lat": 32.433668,"areaCode": "0839"},"510900": {"adcode": "510900","name": "遂宁市","spell": "Suining","lng": 105.571331,"lat": 30.513311,"areaCode": "0825"},"511000": {"adcode": "511000","name": "内江市","spell": "Neijiang","lng": 105.066138,"lat": 29.58708,"areaCode": "1832"},"511100": {"adcode": "511100","name": "乐山市","spell": "Leshan","lng": 103.761263,"lat": 29.582024,"areaCode": "0833"},"511300": {"adcode": "511300","name": "南充市","spell": "Nanchong","lng": 106.082974,"lat": 30.795281,"areaCode": "0817"},"511400": {"adcode": "511400","name": "眉山市","spell": "Meishan","lng": 103.831788,"lat": 30.048318,"areaCode": "1833"},"511500": {"adcode": "511500","name": "宜宾市","spell": "Yibin","lng": 104.630825,"lat": 28.760189,"areaCode": "0831"},"511600": {"adcode": "511600","name": "广安市","spell": "Guang'an","lng": 106.633369,"lat": 30.456398,"areaCode": "0826"},"511700": {"adcode": "511700","name": "达州市","spell": "Dazhou","lng": 107.502262,"lat": 31.209484,"areaCode": "0818"},"511800": {"adcode": "511800","name": "雅安市","spell": "Ya'an","lng": 103.001033,"lat": 29.987722,"areaCode": "0835"},"511900": {"adcode": "511900","name": "巴中市","spell": "Bazhong","lng": 106.753669,"lat": 31.858809,"areaCode": "0827"},"512000": {"adcode": "512000","name": "资阳市","spell": "Ziyang","lng": 104.641917,"lat": 30.122211,"areaCode": "0832"},"513200": {"adcode": "513200","name": "阿坝藏族羌族自治州","spell": "Aba","lng": 102.221374,"lat": 31.899792,"areaCode": "0837"},"513300": {"adcode": "513300","name": "甘孜藏族自治州","spell": "Garze","lng": 101.963815,"lat": 30.050663,"areaCode": "0836"},"513400": {"adcode": "513400","name": "凉山彝族自治州","spell": "Liangshan","lng": 102.258746,"lat": 27.886762,"areaCode": "0834"},"520100": {"adcode": "520100","name": "贵阳市","spell": "Guiyang","lng": 106.713478,"lat": 26.578343,"areaCode": "0851"},"520200": {"adcode": "520200","name": "六盘水市","spell": "Liupanshui","lng": 104.846743,"lat": 26.584643,"areaCode": "0858"},"520300": {"adcode": "520300","name": "遵义市","spell": "Zunyi","lng": 106.937265,"lat": 27.706626,"areaCode": "0852"},"520400": {"adcode": "520400","name": "安顺市","spell": "Anshun","lng": 105.932188,"lat": 26.245544,"areaCode": "0853"},"520500": {"adcode": "520500","name": "毕节市","spell": "Bijie","lng": 105.28501,"lat": 27.301693,"areaCode": "0857"},"520600": {"adcode": "520600","name": "铜仁市","spell": "Tongren","lng": 109.191555,"lat": 27.718346,"areaCode": "0856"},"522300": {"adcode": "522300","name": "黔西南布依族苗族自治州","spell": "Qianxinan","lng": 104.897971,"lat": 25.08812,"areaCode": "0859"},"522600": {"adcode": "522600","name": "黔东南苗族侗族自治州","spell": "Qiandongnan","lng": 107.977488,"lat": 26.583352,"areaCode": "0855"},"522700": {"adcode": "522700","name": "黔南布依族苗族自治州","spell": "Qiannan","lng": 107.517156,"lat": 26.258219,"areaCode": "0854"},"530100": {"adcode": "530100","name": "昆明市","spell": "Kunming","lng": 102.712251,"lat": 25.040609,"areaCode": "0871"},"530300": {"adcode": "530300","name": "曲靖市","spell": "Qujing","lng": 103.797851,"lat": 25.501557,"areaCode": "0874"},"530400": {"adcode": "530400","name": "玉溪市","spell": "Yuxi","lng": 102.543907,"lat": 24.350461,"areaCode": "0877"},"530500": {"adcode": "530500","name": "保山市","spell": "Baoshan","lng": 99.167133,"lat": 25.111802,"areaCode": "0875"},"530600": {"adcode": "530600","name": "昭通市","spell": "Zhaotong","lng": 103.717216,"lat": 27.336999,"areaCode": "0870"},"530700": {"adcode": "530700","name": "丽江市","spell": "Lijiang","lng": 100.233026,"lat": 26.872108,"areaCode": "0888"},"530800": {"adcode": "530800","name": "普洱市","spell": "Pu'er","lng": 100.972344,"lat": 22.777321,"areaCode": "0879"},"530900": {"adcode": "530900","name": "临沧市","spell": "Lincang","lng": 100.08697,"lat": 23.886567,"areaCode": "0883"},"532300": {"adcode": "532300","name": "楚雄彝族自治州","spell": "Chuxiong","lng": 101.546046,"lat": 25.041988,"areaCode": "0878"},"532500": {"adcode": "532500","name": "红河哈尼族彝族自治州","spell": "Honghe","lng": 103.384182,"lat": 23.366775,"areaCode": "0873"},"532600": {"adcode": "532600","name": "文山壮族苗族自治州","spell": "Wenshan","lng": 104.24401,"lat": 23.36951,"areaCode": "0876"},"532800": {"adcode": "532800","name": "西双版纳傣族自治州","spell": "Xishuangbanna","lng": 100.797941,"lat": 22.001724,"areaCode": "0691"},"532900": {"adcode": "532900","name": "大理白族自治州","spell": "Dali","lng": 100.240037,"lat": 25.592765,"areaCode": "0872"},"533100": {"adcode": "533100","name": "德宏傣族景颇族自治州","spell": "Dehong","lng": 98.578363,"lat": 24.436694,"areaCode": "0692"},"533300": {"adcode": "533300","name": "怒江傈僳族自治州","spell": "Nujiang","lng": 98.854304,"lat": 25.850949,"areaCode": "0886"},"533400": {"adcode": "533400","name": "迪庆藏族自治州","spell": "Deqen","lng": 99.706463,"lat": 27.826853,"areaCode": "0887"},"540100": {"adcode": "540100","name": "拉萨市","spell": "Lhasa","lng": 91.132212,"lat": 29.660361,"areaCode": "0891"},"540200": {"adcode": "540200","name": "日喀则市","spell": "Shigatse","lng": 88.885148,"lat": 29.267519,"areaCode": "0892"},"540300": {"adcode": "540300","name": "昌都市","spell": "Qamdo","lng": 97.178452,"lat": 31.136875,"areaCode": "0895"},"542200": {"adcode": "542200","name": "山南地区","spell": "Shannan","lng": 91.766529,"lat": 29.236023,"areaCode": "0893"},"542400": {"adcode": "542400","name": "那曲地区","spell": "Nagqu","lng": 92.060214,"lat": 31.476004,"areaCode": "0896"},"542500": {"adcode": "542500","name": "阿里地区","spell": "Ngari","lng": 80.105498,"lat": 32.503187,"areaCode": "0897"},"542600": {"adcode": "542600","name": "林芝市","spell": "Nyingchi","lng": 94.362348,"lat": 29.654693,"areaCode": "0894"},"610100": {"adcode": "610100","name": "西安市","spell": "Xi'an","lng": 108.948024,"lat": 34.263161,"areaCode": "029"},"610200": {"adcode": "610200","name": "铜川市","spell": "Tongchuan","lng": 108.963122,"lat": 34.90892,"areaCode": "0919"},"610300": {"adcode": "610300","name": "宝鸡市","spell": "Baoji","lng": 107.14487,"lat": 34.369315,"areaCode": "0917"},"610400": {"adcode": "610400","name": "咸阳市","spell": "Xianyang","lng": 108.705117,"lat": 34.333439,"areaCode": "0910"},"610500": {"adcode": "610500","name": "渭南市","spell": "Weinan","lng": 109.502882,"lat": 34.499381,"areaCode": "0913"},"610600": {"adcode": "610600","name": "延安市","spell": "Yan'an","lng": 109.49081,"lat": 36.596537,"areaCode": "0911"},"610700": {"adcode": "610700","name": "汉中市","spell": "Hanzhong","lng": 107.028621,"lat": 33.077668,"areaCode": "0916"},"610800": {"adcode": "610800","name": "榆林市","spell": "Yulin","lng": 109.741193,"lat": 38.290162,"areaCode": "0912"},"610900": {"adcode": "610900","name": "安康市","spell": "Ankang","lng": 109.029273,"lat": 32.6903,"areaCode": "0915"},"611000": {"adcode": "611000","name": "商洛市","spell": "Shangluo","lng": 109.939776,"lat": 33.868319,"areaCode": "0914"},"620100": {"adcode": "620100","name": "兰州市","spell": "Lanzhou","lng": 103.823557,"lat": 36.058039,"areaCode": "0931"},"620200": {"adcode": "620200","name": "嘉峪关市","spell": "Jiayuguan","lng": 98.277304,"lat": 39.786529,"areaCode": "1937"},"620300": {"adcode": "620300","name": "金昌市","spell": "Jinchang","lng": 102.187888,"lat": 38.514238,"areaCode": "0935"},"620400": {"adcode": "620400","name": "白银市","spell": "Baiyin","lng": 104.173606,"lat": 36.54568,"areaCode": "0943"},"620500": {"adcode": "620500","name": "天水市","spell": "Tianshui","lng": 105.724998,"lat": 34.578529,"areaCode": "0938"},"620600": {"adcode": "620600","name": "武威市","spell": "Wuwei","lng": 102.634697,"lat": 37.929996,"areaCode": "1935"},"620700": {"adcode": "620700","name": "张掖市","spell": "Zhangye","lng": 100.455472,"lat": 38.932897,"areaCode": "0936"},"620800": {"adcode": "620800","name": "平凉市","spell": "Pingliang","lng": 106.684691,"lat": 35.54279,"areaCode": "0933"},"620900": {"adcode": "620900","name": "酒泉市","spell": "Jiuquan","lng": 98.510795,"lat": 39.744023,"areaCode": "0937"},"621000": {"adcode": "621000","name": "庆阳市","spell": "Qingyang","lng": 107.638372,"lat": 35.734218,"areaCode": "0934"},"621100": {"adcode": "621100","name": "定西市","spell": "Dingxi","lng": 104.626294,"lat": 35.579578,"areaCode": "0932"},"621200": {"adcode": "621200","name": "陇南市","spell": "Longnan","lng": 104.929379,"lat": 33.388598,"areaCode": "2935"},"622900": {"adcode": "622900","name": "临夏回族自治州","spell": "Linxia","lng": 103.212006,"lat": 35.599446,"areaCode": "0930"},"623000": {"adcode": "623000","name": "甘南藏族自治州","spell": "Gannan","lng": 102.911008,"lat": 34.986354,"areaCode": "0941"},"630100": {"adcode": "630100","name": "西宁市","spell": "Xining","lng": 101.778916,"lat": 36.623178,"areaCode": "0971"},"630200": {"adcode": "630200","name": "海东市","spell": "Haidong","lng": 102.10327,"lat": 36.502916,"areaCode": "0972"},"632200": {"adcode": "632200","name": "海北藏族自治州","spell": "Haibei","lng": 100.901059,"lat": 36.959435,"areaCode": "0970"},"632300": {"adcode": "632300","name": "黄南藏族自治州","spell": "Huangnan","lng": 102.019988,"lat": 35.517744,"areaCode": "0973"},"632500": {"adcode": "632500","name": "海南藏族自治州","spell": "Hainan","lng": 100.619542,"lat": 36.280353,"areaCode": "0974"},"632600": {"adcode": "632600","name": "果洛藏族自治州","spell": "Golog","lng": 100.242143,"lat": 34.4736,"areaCode": "0975"},"632700": {"adcode": "632700","name": "玉树藏族自治州","spell": "Yushu","lng": 97.008522,"lat": 33.004049,"areaCode": "0976"},"632800": {"adcode": "632800","name": "海西蒙古族藏族自治州","spell": "Haixi","lng": 97.370785,"lat": 37.374663,"areaCode": "0977"},"640100": {"adcode": "640100","name": "银川市","spell": "Yinchuan","lng": 106.278179,"lat": 38.46637,"areaCode": "0951"},"640200": {"adcode": "640200","name": "石嘴山市","spell": "Shizuishan","lng": 106.376173,"lat": 39.01333,"areaCode": "0952"},"640300": {"adcode": "640300","name": "吴忠市","spell": "Wuzhong","lng": 106.199409,"lat": 37.986165,"areaCode": "0953"},"640400": {"adcode": "640400","name": "固原市","spell": "Guyuan","lng": 106.285241,"lat": 36.004561,"areaCode": "0954"},"640500": {"adcode": "640500","name": "中卫市","spell": "Zhongwei","lng": 105.189568,"lat": 37.514951,"areaCode": "1953"},"650100": {"adcode": "650100","name": "乌鲁木齐市","spell": "Urumqi","lng": 87.617733,"lat": 43.792818,"areaCode": "0991"},"650200": {"adcode": "650200","name": "克拉玛依市","spell": "Karamay","lng": 84.873946,"lat": 45.595886,"areaCode": "0990"},"652100": {"adcode": "652100","name": "吐鲁番市","spell": "Turpan","lng": 89.184078,"lat": 42.947613,"areaCode": "0995"},"652200": {"adcode": "652200","name": "哈密地区","spell": "Kumul","lng": 93.51316,"lat": 42.833248,"areaCode": "0902"},"652300": {"adcode": "652300","name": "昌吉回族自治州","spell": "Changji","lng": 87.304012,"lat": 44.014577,"areaCode": "0994"},"652700": {"adcode": "652700","name": "博尔塔拉蒙古自治州","spell": "Bortala","lng": 82.074778,"lat": 44.903258,"areaCode": "0909"},"652800": {"adcode": "652800","name": "巴音郭楞蒙古自治州","spell": "Bayingol","lng": 86.150969,"lat": 41.768552,"areaCode": "0996"},"652900": {"adcode": "652900","name": "阿克苏地区","spell": "Aksu","lng": 80.265068,"lat": 41.170712,"areaCode": "0997"},"653000": {"adcode": "653000","name": "克孜勒苏柯尔克孜自治州","spell": "Kizilsu","lng": 76.172825,"lat": 39.713431,"areaCode": "0908"},"653100": {"adcode": "653100","name": "喀什地区","spell": "Kashgar","lng": 75.989138,"lat": 39.467664,"areaCode": "0998"},"653200": {"adcode": "653200","name": "和田地区","spell": "Hotan","lng": 79.92533,"lat": 37.110687,"areaCode": "0903"},"654000": {"adcode": "654000","name": "伊犁哈萨克自治州","spell": "Ili","lng": 81.317946,"lat": 43.92186,"areaCode": "0999"},"654200": {"adcode": "654200","name": "塔城地区","spell": "Qoqek","lng": 82.985732,"lat": 46.746301,"areaCode": "0901"},"654300": {"adcode": "654300","name": "阿勒泰地区","spell": "Altay","lng": 88.13963,"lat": 47.848393,"areaCode": "0906"},"659001": {"adcode": "659001","name": "石河子市","spell": "Shihezi","lng": 86.041075,"lat": 44.305886,"areaCode": "0993"},"659002": {"adcode": "659002","name": "阿拉尔市","spell": "Aral","lng": 81.285884,"lat": 40.541914,"areaCode": "1997"},"659003": {"adcode": "659003","name": "图木舒克市","spell": "Tumxuk","lng": 79.077978,"lat": 39.867316,"areaCode": "1998"},"659004": {"adcode": "659004","name": "五家渠市","spell": "Wujiaqu","lng": 87.526884,"lat": 44.167401,"areaCode": "1994"},"659005": {"adcode": "659005","name": "北屯市","spell": "Beitun","lng": 87.824932,"lat": 47.353177,"areaCode": "1906"},"659006": {"adcode": "659006","name": "铁门关市","spell": "Tiemenguan","lng": 85.501218,"lat": 41.827251,"areaCode": "1996"},"659007": {"adcode": "659007","name": "双河市","spell": "Shuanghe","lng": 82.353656,"lat": 44.840524,"areaCode": "1909"},"710000": {"adcode": "710000","name": "台湾省","spell": "Taiwan Province","lng": 121.509062,"lat": 25.044332,"areaCode": "1886"},"810000": {"adcode": "810000","name": "香港特別行政區","spell": "Hong Kong","lng": 114.173355,"lat": 22.320048,"areaCode": "1852"},"820000": {"adcode": "820000","name": "澳門特別行政區","spell": "Macau","lng": 113.54909,"lat": 22.198951,"areaCode": "1853"}
}

五、自定义组件完成，然后在其他页面引用GoMap组件，从而获取想要的地址信息，经纬度，地址等

<template><div id="applyOrder"><van-nav-bartitle="网络接入申请工单"@click-left="onClickLeft"class="topNavFix"><template #left><van-icon name="arrow-left" color="#fff" size="18" /></template></van-nav-bar><div class="infoSubAll" v-show="!mapShow"><van-form @submit="onSubmit" :label-width="110" :scroll-to-error="true"><div class="infoSubTop"><div class="infoSubOne"><div class="addLiAll"><van-fieldclearableclass="tipTrue"input-align="right"error-message-align="right"v-model.trim="subInfo.xlazdz"name="线路安装地址"label="线路安装地址"placeholder="":rules="[{ required: true, message: '线路安装地址' }]"@click-right-icon="goMap"right-icon="location"disabled/><van-fieldclearableclass="tipTrue"input-align="right"error-message-align="right"v-model.trim="subInfo.xxdz"name="详细地址"label="详细地址"placeholder="详细地址":rules="[{ required: true, message: '请输入详细地址' }]"/><div class="contBtnAll"><van-buttonroundblocktype="info"native-type="submit":loading="subFlag"loading-type="spinner">提交工单</van-button></div></div></div></div></van-form></div><div v-show="mapShow"><GoMapref="mapFnAll"@getAreaInfo="getAreaInfo"@showChange="showChange"></GoMap></div></div>
</template><script>import { orderSubmitSave } from '@/api/userApi/index.js'
import GoMap from "@/views/GoMap.vue";
export default {name: 'ApplyOrder',data() {return {showSub: false,mapShow: false,subFlag: false,subInfo: {xlazdz: '',xxdz: '',provinceName: '',cityName: '',districtName: '',districtCode: ''},locationObj: null}},components: {GoMap},mounted() {if (this.mapShow) {this.$refs.mapFnAll.init()}},methods: {showChange(item) {this.mapShow = item},getAreaInfo(item) {this.mapShow = falsethis.locationObj = JSON.parse(JSON.stringify(item))this.subInfo.xlazdz = `经度：${this.locationObj.position[0]}，纬度：${this.locationObj.position[1]}`this.subInfo.xxdz = this.locationObj.addressthis.subInfo.provinceName = this.locationObj.regeocode.addressComponent.provincethis.subInfo.cityName = this.locationObj.regeocode.addressComponent.citythis.subInfo.districtName = this.locationObj.regeocode.addressComponent.districtthis.subInfo.districtCode = this.locationObj.regeocode.addressComponent.adcodeconsole.log('222', this.locationObj)},goMap() {this.mapShow = truethis.$refs.mapFnAll.init()},getSubmitSave() {const data = {lineInstallAddrLongitudeLatitude: this.subInfo.xlazdz,detailAddr: this.subInfo.xxdz,provinceName: this.subInfo.provinceName,cityName: this.subInfo.cityName,districtName: this.subInfo.districtName,districtCode: this.subInfo.districtCode}this.subFlag = trueorderSubmitSave(data).then((resp) => {if (resp.code === 0) {this.showSub = truesetTimeout(() => {this.$router.push({path: '/homePage'})}, 3000)} else {this.$toast.fail(resp.errorMessage)}this.subFlag = false},(error) => {this.subFlag = falsethis.$toast.fail(error)})},onSubmit() {this.getSubmitSave()},onClickLeft() {console.log('1121')this.$router.push('/homePage')}},
}
</script><style lang="less" scoped>
.wrapper {display: flex;align-items: center;justify-content: center;height: 100%;.subSucess {width: 230px;height: 194px;background: #fff;display: flex;justify-content: center;align-items: center;flex-direction: column;.subPic {width: 41px;height: 41px;background: url("~@/assets/imgs/subSucess.png") no-repeat;background-size: cover;}.subName {font-size: 20px;color: #333;margin-top: 14px;margin-bottom: 4px;font-weight: 700;}.subText {font-size: 12px;color: #666;margin-bottom: 20px;}.subBtn {width: 76px;height: 30px;border: 1px solid #999;border-radius: 2px;text-align: center;line-height: 30px;color: #999;font-size: 14px;}}
}
.topNavFix {width: 100%;position: fixed;left: 0;top: 0;background: #005dff;::v-deep .van-nav-bar__title {color: #fff;}
}
.infoSubAll {width: 100%;padding: 46px 12px 0;box-sizing: border-box;border: 1px solid #f4f7fe;background: #f4f7fe;.infoSubTop {// padding-bottom: 86px;box-sizing: border-box;margin-bottom: 24px;.infoSubOne {.subTitle {display: flex;align-items: center;padding: 15px 0px;box-sizing: border-box;.subTitleBg {width: 4px;height: 17px;margin-right: 8px;background: #005dff;border-radius: 0px 4px 4px 0px;}.subTitleText {color: #333;font-size: 14px;}}.addLiAll {display: flex;flex-direction: column;padding: 0px 12px;box-sizing: border-box;border-radius: 8px;background: #fff;::v-deep .van-cell {padding: 15px 0px;border-bottom: 1px solid #ebedf0;}::v-deep .van-cell::after {border-bottom: 0;}::v-deep .van-cell:nth-last-child(1) {border-bottom: 0;}.tipTrue {::v-deep .van-cell__title {span::after {color: #f12b44;font-size: 14px;content: "*";margin-left: 6px;}}::v-deep .van-field__control::placeholder {color: #c8c9cc;}::v-deep .van-icon-location {color: #005dff;font-size: 20px;}}.uploadAll {display: flex;justify-content: space-between;padding: 15px 0px;box-sizing: border-box;.uploadName {font-size: 14px;color: #646566;.tipRed {color: #f12b44;font-size: 14px;margin-left: 6px;}}.uploadStyl {::v-deep .van-button {width: 70px;height: 24px;border-radius: 20px;font-size: 12px;}::v-deep .van-button--info {background-color: #005dff;border: 1px solid #005dff;}}}.uploadText {display: flex;align-items: center;padding: 15px 0px;box-sizing: border-box;border-top: 1px solid #ebedf0;.textLeft {font-size: 14px;color: #333;margin-right: 20px;}.textRit {font-size: 14px;color: #333;}}.contBtnAll {width: 100%;padding: 20px 48px;box-sizing: border-box;background: #fff;::v-deep .van-button--info {background-color: #005dff;border: 1px solid #005dff;width: 100%;height: 46px;.van-button__text {margin-left: 12px;}}}}}}
}
</style>

移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址相关推荐

vue中高德地图限制拖拽地图的范围
本文主要分为二维地图和三维地图方法一.首先是二维地图 1.首先要在地图加载完成切中心点已确定的地方获取当前地图边界范围坐标 (我的map用的是全局map) this.logMapBounds() l ...
高德地图安卓拖拽选点_行车记录仪当“眼睛” 高德地图手机AR导航再次升级...
来源标题:行车记录仪当"眼睛" 高德地图手机AR导航再次升级高德地图近日发布新版本,AR驾车导航服务再次升级,支持连接车内行车记录仪.由行车记录仪的摄像头充当"眼睛&q ...
高德地图安卓拖拽选点_不止微信支付宝高德地图正式上线小程序入口
此前,即速应用发布的<小程序2019年行业年中增长研究报告>指出,小程序发展周期主要分为四个阶段:探索期.启动期.高速发展期和成熟期,目前处于高速发展后期,逐渐平稳发展. 2017年小程序 ...
使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿
使用vue和高德地图,仿58地图找房pc端,且解决marker过多卡顿 1.在index.html引入高德地图链接 https://webapi.amap.com/maps?v=1.4.15& ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...

移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址

移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址相关推荐

最新文章

热门文章