hotCity 城市選擇器， 城市數據庫可自己導出

如果需要導出并部署在公司的生產環境，最后有SQL導出下載地址

社區另外一個省城市選擇聯動的DEMO，也做的挺好的
http://www.mkhyf.com/topic/416

使用方法

• 復制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"
  },
  ...
]

開源地址 https://github.com/hotapp888/hotcity