hotCity 城市選擇器， 城市數據庫可自己導出
后台數據API 由HotApp小程序統計提供並維護，如果需要導出並部署在公司的生產環境，最后有SQL導出下載地址
開源地址 https://github.com/hotapp888/hotcity
使用方法
-
復制pages/district到你的項目目錄
-
把樣式文件district.wxss引入到您調用本插件的作用域
@import "你的路徑/district/wxParse.wxss"; -
在需要使用的模版的x.wxml中引入模版文件wxParse.wxml
<import src="../district/district.wxml"/> <template is="district" data="{{districts}}" />
-
在對應的js中引入district.js文件
var WxParse = require('你的路徑/district/district.js'); -
使用: 在你的js文件中, 必須要綁定四個事件:
getProvinces、getCities、getDistricts和finish
其中
getProvinces事件需要調用districts.getProvinces(this);
getCities事件需要調用districts.getCities(this, event);
getDistricts事件需要調用districts.getDistricts(this, event);
finish事件需要調用districts.finish(this, event);
應用截圖
樣式一 通過導航實現三級選擇
樣式二 三級聯動
統計截圖 通過接入hotApp的統計，可知道大家喜歡那個城市選擇器
數據來源
數據來源於高德地圖, 從高德地圖的行政區划查詢中找到了api請求地址, 然后再寫腳本把高德所有的數據全部導入到hotapp的數據庫中
數據庫表設計
高德地圖返回的數據格式是:
{
adcode: "220100" center: "125.3245,43.886841" citycode: "0431" districts: [] level: "city" name: "長春市" }
我稍微改造了一下, 數據庫字段設計為:
CREATE TABLE `tbl_districts` ( `adcode` char(6) COLLATE utf8_unicode_ci NOT NULL, `name` varchar(20) COLLATE utf8_unicode_ci NOT NULL, `lng` decimal(12,8) unsigned NOT NULL, `lat` decimal(12,8) unsigned NOT NULL, `level` varchar(10) COLLATE utf8_unicode_ci NOT NULL, `parent_adcode` char(6) COLLATE utf8_unicode_ci NOT NULL, `created_at` timestamp NULL DEFAULT NULL, `updated_at` timestamp NULL DEFAULT NULL, PRIMARY KEY (`adcode`), KEY `tbl_districts_parent_adcode_index` (`parent_adcode`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
其中, lng表示經度, lat表示緯度, level有"province"、"city"和"district"三種類型
接口使用方法
一共就一個接口: GET /districts, 如果不帶參數, 表示獲取的是所有province級別的數據, 如果帶上參數parent_adcode, 表示獲取指定的parent_adcode的數據.
比如: 要獲取所有province級別的數據: GET https://wxapi.hotapp.cn/api/districts , 返回格式為:
[
{
"adcode": 110000, "name": "北京市", "lng": "116.40528500", "lat": "39.90498900", "level": "province", "parent_adcode": "" }, { "adcode": 120000, "name": "天津市", "lng": "117.19018200", "lat": "39.12559600", "level": "province", "parent_adcode": "" }, ... { "adcode": 420000, "name": "湖北省", "lng": "114.29857200", "lat": "30.58435500", "level": "province", "parent_adcode": "" }, ... ]
然后如果需要獲取湖北省所有的city, 那么調用GET https://wxapi.hotapp.cn/api/districts?parent_adcode=420000, 返回格式為:
[
{
"adcode": 420100, "name": "武漢市", "lng": "114.29857200", "lat": "30.58435500", "level": "city", "parent_adcode": "420000" }, { "adcode": 420700, "name": "鄂州市", "lng": "114.89059300", "lat": "30.39653600", "level": "city", "parent_adcode": "420000" }, { "adcode": 420800, "name": "荊門市", "lng": "112.20425100", "lat": "31.03542000", "level": "city", "parent_adcode": "420000" }, ... ]
然后想要再獲取武漢市所有的區, 那么就調用GET https://wxapi.hotapp.cn/api/districts?parent_adcode=420100, 返回格式為:
[
{
"adcode": 420102, "name": "江岸區", "lng": "114.30304000", "lat": "30.59491100", "level": "district", "parent_adcode": "420100" }, { "adcode": 420103, "name": "江漢區", "lng": "114.28310900", "lat": "30.57877100", "level": "district", "parent_adcode": "420100" }, ... ]
另外, 考慮到有些用戶可能以后會自己開發后台, 所以也提供了數據庫導出接口, 在這里 http://wenda.hotapp.cn/article/3, 這個會導出我們的數據庫表接口和所有數據!
hot雲筆記小程序 雲端存儲記事的開源小程序 https://github.com/hotapp888/hotapp-notepad