uniapp选择所有城市通过索引方式(源码自带所有城市json格式数据)
2021/12/13 14:19:26
本文主要是介绍uniapp选择所有城市通过索引方式(源码自带所有城市json格式数据),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
中国所有城市json数据,通过uniapp打开,直接运行项目
项目源码:
<template> <view class="content"> <!-- <view class="top-view"></view> --> <ss-select-city :hotCitys="hotCitys" v-model="locationValue" :locationValue="locationValue" @on-select="selectValue" /> </view> </template> <script> import ssSelectCity from '@/components/ss-select-city/ss-select-city.vue' export default { components: { ssSelectCity }, data() { return { hotCitys: ['杭州', '天津', '北京', '上海', '深圳', '广州', '成都', '重庆', '厦门'], locationValue: '正在定位...', // 页面来源 sourctType: '' } }, onLoad(options) { let that = this this.sourctType = options.sourctType if (this.sourctType == 'pushvideo' || this.sourctType == 'pushvideo') { uni.setNavigationBarTitle({ title: '选择工作地点' }) } setTimeout(function() { that.getLocation() }, 1000) }, methods: { getLocation: function() { let that = this uni.getLocation({ type: 'wgs84', geocode: true, success: function(res) { console.log(res); var cityTitle = (res.address && res.address.city) || ''; if (cityTitle.length > 0) { let lastChares = cityTitle.substring(cityTitle.length-1); if (lastChares == "市") { cityTitle = cityTitle.substring(0, cityTitle.length - 1); } that.locationValue = cityTitle uni.$emit('upadteLoaction', cityTitle) } else { let latitude = res.latitude let longitude = res.longitude uni.request({ header: { "Content-Type": "application/text" }, url: 'http://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=52UBZ-W6564-G3GUG-XQRQM-IXOU6-DCFOR', success(re) { console.log("中文位置") console.log(JSON.stringify(re)) if (re.statusCode === 200) { let tmpCity = (re.data.result && re.data.result.address_component && re.data.result.address_component.city) || ''; let lastChares = tmpCity.substring(tmpCity.length - 1); if (lastChares == "市") { tmpCity = tmpCity.substring(0, tmpCity.length - 1); } that.locationValue = tmpCity uni.$emit('upadteLoaction', tmpCity) } } }); } }, fail: (err) => { console.log(err); } }); }, selectValue(city) { console.log(city) this.locationValue = city // 发职位 if (this.sourctType == "publish") { uni.$emit('publishCity', city) } else if (this.sourctType == 'pushvideo') { console.log("发视频选择地点"); getApp().globalData.pushVideoLocation = city } else { // 更新首页位置 uni.$emit('updateHomeLocation', city) } uni.showToast({ title:city, icon: 'none' }) } } } </script> <style> .content { /* padding-top: 30rpx; */ background-color: rgba(34, 33, 33, 1); } </style>
所有城市json数据:
const citys = [ { "letter": "A", "list": [ "安远","安义","安溪","安丘","安宁","安吉","安福","阿城","安阳","安顺","鞍山","安庆","安康","阿里", "阿勒泰","阿拉善盟","阿克苏","阿坝" ] }, { "letter": "B", "list": [ "北京","博兴","博罗","博爱","璧山","宾阳","宾县","滨海","巴彦","宝应","亳州","博尔塔拉","滨州","毕节", "本溪","北海","巴中","巴音郭楞","巴彦淖尔","包头","保山","宝鸡","保定","蚌埠","白银","白山","百色","白城" ] }, { "letter": "C", "list": [ "成都","常州","长沙","长春","重庆","朝阳","巢湖","长治","昌吉","昌都","常德","沧州","郴州","承德","潮州", "滁州","楚雄","崇左","池州","赤峰","枞阳","从化","慈溪","淳安","崇州","崇义","崇仁","茌平","成武","城口", "呈贡","潮安","昌邑","长兴","长汀","长泰","常熟","常山","昌乐","长乐","长海","长丰","长岛","曹县","苍山", "苍南" ] }, { "letter": "D", "list": [ "丹东","大理","东莞","大连","大兴安岭","大同","大庆","德州","德阳","德宏","达州","大丰","东营","迪庆", "定西","单县","当涂","砀山","岱山","大邑","大田","大埔","丹阳","德化","德安","大足","大余","德庆","德清", "登封","德惠","定南","垫江","电白","德兴","东海","东阿","定远","定陶","东台","东山","东平","东明","东源", "东阳","东乡","洞头","都江堰","都昌","东至" ] }, { "letter": "E", "list": [ "鄂尔多斯","恩施","恩平","鄂州" ] }, { "letter": "F", "list": [ "佛山","福州","防城港","抚顺","阜新","阜阳","抚州","法库","富阳","福清","阜宁","阜南","富民","浮梁","福鼎", "福安","佛冈","分宜","凤阳","奉新","丰县","凤台","丰顺","封开","奉节","奉化","丰都","丰城","费县","肥西", "肥东","肥城","方正","繁昌" ] }, { "letter": "G", "list": [ "广州","贵阳","甘南","赣州","甘孜","广安","广元","贵港","桂林","果洛","固原","赣县","赣榆","高安","固镇", "古田","贵溪","灌云","冠县","灌南","光泽","广饶","广宁","广丰","广德","广昌","巩义","高州","高邮","高邑", "高要","高唐","高青","高密","高陵","皋兰","高淳","藁城" ] }, { "letter": "H", "list": [ "杭州","哈尔滨","邯郸","海口","黑河","合肥","鹤岗","河池","鹤壁","汉中","哈密","海西","海南","海东","海北", "惠州","呼伦贝尔","葫芦岛","呼和浩特","黄石","黄山","黄南","黄冈","淮南","怀化","淮北","淮安","红河","贺州", "菏泽","河源","和田地","衡阳","衡水","怀远","怀宁","怀集","桦甸","华安","洪泽","和县","鹤山","和平","横县", "横峰","合川","含山","海阳","海盐","海宁","海门","海丰","海安","湖州","户县","霍山","霍邱","呼兰","湖口", "惠民","惠来","惠东","会昌","惠安","化州","桓台" ] }, { "letter": "J", "list": [ "鸡西","酒泉","九江","锦州","晋中","济宁","金华","荆州","荆门","景德镇","晋城","金昌","揭阳","嘉峪关","吉安", "江门","佳木斯","济南","吉林","嘉兴","焦作","井冈山","旌德","靖安","即墨","揭西","界首","揭东","嘉祥","嘉善", "胶州","胶南","蕉岭","蛟河","吉安","建阳","建瓯","建宁","建湖","江阴","姜堰","江山","将乐","江津","江都","建德", "九台","九江","吉水","晋州","金寨","缙云","金乡","金溪","进贤","金堂","金坛","晋宁","金门","晋江","金湖","井陉", "泾县","景宁","靖江","巨野","莒县","句容","莒南","鄄城","济源","济阳","绩溪" ] }, { "letter": "K", "list": [ "昆明","开封","喀什地","克拉玛依","克孜勒","开化","开平","开县","开阳","康平","垦利","昆山" ] }, { "letter": "L", "list": [ "连云港","凉山","乐山","拉萨","廊坊","莱芜","来宾","洛阳","柳州","兰州","六盘水","六安","丽水","林芝","临沂","临夏", "临汾","临沧","丽江","辽源","辽阳","聊城","乐亭","乐清","乐平","乐陵","雷州","乐昌","乐安","兰溪","蓝田","郎溪", "莱州","莱阳","莱西","来安","吕梁","泸州","漯河","娄底","龙岩","陇南","临邑","临沭","临朐","临泉","临清","临海", "陵县","灵寿","灵璧","临安","利津","黎川","辽中","连州","涟水","连山","连平","连南","廉江","连江","莲花","梁山", "梁平","连城","鹿寨","芦溪","禄劝","鹿泉","罗源","洛宁","罗定","庐江","陆河","陆丰","滦县","滦南","栾川","栾城", "龙游","龙泉","龙南","龙门","龙口","龙海","龙川","隆安","溧阳","利辛","浏阳","柳江","柳城","溧水" ] }, { "letter": "M", "list": [ "马鞍山","茂名","眉山","梅州","绵阳","牡丹江","马山","梅县","蒙城","孟津","蒙阴","孟州","明光","明溪","闽侯","闽清", "木兰" ] }, { "letter": "N", "list": [ "南昌","南京","南宁","南通","宁波","南充","南平","南阳","那曲","内江","宁德","怒江","南安","南澳","南城","南川","南丰", "南靖","南康","南陵","南雄","宁都","宁国","宁海","宁化","宁津","宁乡","宁阳","农安" ] }, { "letter": "P", "list": [ "盘锦","攀枝花","平顶山","平凉","萍乡","普洱","莆田","濮阳","磐安","磐石","沛县","蓬莱","彭水","彭泽","彭州","平度", "平和","平湖","屏南","平山","平潭","平阳","平阴","平邑","平原","平远","郫县","邳州","鄱阳","浦城","浦江","蒲江","普兰店", "普宁" ] }, { "letter": "Q", "list": [ "青岛","泉州","黔东","黔南","黔西南","庆阳","清远","秦皇岛","钦州","齐齐哈尔","七台河","曲靖","衢州","迁安","潜山","铅山", "迁西","启东","齐河","綦江","祁门","清流","青田","清新","青阳","庆元","庆云","清镇","青州","沁阳","邛崃","栖霞","全椒", "曲江","曲阜","全南" ] }, { "letter": "R", "list": [ "日喀则","日照","饶平","仁化","融安","荣昌","荣成","融水","如东","如皋","瑞安","瑞昌","瑞金","乳山","汝阳","乳源" ] }, { "letter": "S", "list": [ "上海","沈阳","深圳","石家庄","苏州","三门峡","三明","三亚","商丘","商洛","上饶","汕尾","汕头","绍兴","韶关","山南","邵阳", "十堰","双鸭山","石嘴山","绥化","松原","四平","朔州","泗阳","泗县","泗水","四会","泗洪","沭阳","顺昌","舒兰","舒城","双流", "双城","寿县","寿宁","寿光","石柱","始兴","石台","石狮","石林","石城","射阳","歙县","深泽","莘县","嵊州","嵊泗","沙县","绍兴", "邵武","尚志","上虞","上犹","上饶","上林","上栗","商河","上杭","上高","诏安","三门","三江","松阳","嵩县","松溪","嵩明","宿州", "宿迁","随州","遂宁","宿松","遂溪","濉溪","睢宁","遂川","遂昌","宿豫" ] }, { "letter": "T", "list": [ "天津","台州","唐山","塔城地","泰安","太原","泰州","天水","铁岭","铜川","通化","通辽","铜陵","铜仁", "通州","桐乡","铜山","潼南", "桐庐","铜陵","铜梁","通河","铜鼓","桐城","天台","天长","滕州","唐海","郯城","泰兴","泰顺","台山","泰宁","太湖","泰和","太和","太仓", "吐鲁番" ] }, { "letter": "W", "list": [ "潍坊","威海","武汉","无锡","渭南","文山","温州","乌海","芜湖","乌兰察布","乌鲁木齐","武威","吴忠","武陟","婺源","武夷山","武义","巫溪", "无为","巫山","武平","武宁","武鸣","武隆","五莲","吴江","无极","五华","芜湖","五河","无棣","吴川","武城","五常","涡阳","温县","汶上", "温岭","翁源","文登","文成","微山","万载","万年","望江","望城","万安","瓦房店","梧州" ] }, { "letter": "X", "list": [ "厦门","西安","许昌","徐州","襄樊","湘潭","湘西","咸宁","咸阳","孝感","锡林郭勒盟","兴安盟","邢台","西宁","新乡","信阳","新余","忻州", "西双版纳","宣城","峡江","夏津","象山","响水","仙居","仙游","萧县","霞浦","息烽","新安","新昌","信丰","新丰","新干","兴国","兴化","兴宁", "行唐","荥阳","星子","辛集","新建","新津","新乐","新民","新密","新泰","新兴","新沂","信宜","新郑","休宁","秀山","修水","修文","修武", "寻甸","盱眙","徐闻","寻乌" ] }, { "letter": "Y", "list": [ "扬州","烟台","雅安","延安","延边","盐城","阳江","阳泉","宜宾","宜昌","伊春","宜春","伊犁哈萨克","银川","营口","鹰潭","益阳","永州","岳阳", "玉林","榆林","运城","云浮","玉树","玉溪","阳春","阳东","阳谷","阳山","阳信","阳西","扬中","偃师","延寿","兖州","伊川","宜丰","宜黄","依兰", "宜良","沂南","英德","颍上","沂水","义乌","黟县","宜兴","弋阳","宜阳","沂源","仪征","永安","永川","永春","永登","永定","永丰","永吉","永嘉", "永康","邕宁","永泰","永新","永修","尤溪","酉阳","元氏","禹城","于都","岳西","余干","玉环","余江","郁南","云安","郓城","云和","云霄","云阳", "玉山","榆树","鱼台","玉田","余姚","榆中" ] }, { "letter": "Z", "list": [ "漳州","遵化","郑州","中山","珠海","枣庄","张家界","张家口","张掖","湛江","肇庆","昭通","镇江","中卫","周口","舟山","驻马店","株洲","淄博", "自贡","资阳","遵义","赞皇","增城","张家港","漳平","漳浦","章丘","樟树","沾化","赵县","招远","正定","政和","柘荣","中牟","忠县","周宁", "周至","庄河","诸城","诸暨","紫金","资溪","邹城","邹平" ] } ] export default citys
源码下载地址:》》》
这篇关于uniapp选择所有城市通过索引方式(源码自带所有城市json格式数据)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-26React入门教程:从零开始搭建你的第一个React应用
- 2024-12-25Vue2入门教程:轻松掌握前端开发基础
- 2024-12-25Vue3入门指南:快速搭建你的第一个Vue3项目
- 2024-12-25JS基础知识入门教程
- 2024-12-25React基础知识详解:从入门到初级应用
- 2024-12-25Vue3基础知识详解与实战指南
- 2024-12-25Vue3学习:从入门到初步掌握
- 2024-12-25Vue3入门:新手必读的简单教程
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用