hotCity 小程序城市选择器, 城市数据库可自己导出
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
hotCity 小程序城市选择器, 城市数据库可自己导出的更多相关文章
- 微信小程序省市区选择器对接数据库
前言,小程序本身是带有地区选着器的(网站:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html),由于自己开发的程序的数据是很 ...
- 微信小程序-获取当前城市位置及再次授权地理位置
微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...
- 微信小程序 A~Z城市选择器js文件
微信小程序城市选择 [a~z] 的所有城市选择 city.js a~z排序的城市数据 addressChoose.js 其他js文件可引用 city.js /** * Created by yvded ...
- mpvue小程序开发之 城市定位
背景: 在进行小程序开发时,有一个定位城市的需求,下面就来讲讲怎么实现这个功能的吧 解决方案: 小程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度用相应的地图转换出地名 ...
- uniapp|微信小程序获取当前城市名称--逆地址解析
六年代码两茫茫,不思量,自难忘 6年资深前端主管一枚,只分享技术干货,项目实战经验 关注博主不迷路~ 问题 uniapp开发的小程序需要获取当前城市名称 解决步骤 看文档 当然是看uniapp文档,我 ...
- 微信小程序------联动选择器
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. 先来看看效果图: 1:普通选择器 m ...
- 微信小程序滑动选择器
实现微信小程序滑动选择效果 在wxml文件中,用一个picker标签代表选择器,bindchange是用户点击确定后触发的函数,index是picker自带的参数,用户点击确定后,bindchange ...
- 微信小程序のwxss选择器
一.什么是选择器 选择器就是选择标签所用样式的模式,即:以什么方式设置样式. 二.微信小程序的样式选择器 .calss就是选择器的一种 三.选择器的优先级 element表示样式元素:.element ...
- 微信小程序开发显示城市天气
本案例实现动态显示城市天气的功能,案例效果如下: 首先分析制作的思路: 1.在app.json文件的pages数组里加上main文件夹和template(模板)文件夹的路径. 2.在main.js文件 ...
随机推荐
- 深入理解javascript中的焦点管理
× 目录 [1]焦点元素 [2]获得焦点 [3]失去焦点[4]焦点事件 前面的话 焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点.但却少有人对焦点管理系统地做总结归纳.本文 ...
- 跟我学Angular2(1-初体验)
0.导言 Angular1作为最流行的前端MV*框架,给前端开发带来了极大的便利性.但是,仍然有许多不好的地方已经很难再改变了.Angular团队根据WEB发展的趋势和Angular1中积累的经验来开 ...
- 手动实现jQuery Tools里面tab功能
平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的.当然有时同事喜欢使用jQuery UI里面的插件.并且jQuery ...
- Javascript之一切皆为对象1
在javascript的世界里,有这么一句话,一切皆为对象. 但是这个对象,应该怎么理解呢? OMG,难道值类型也是对象?!! 当然,不是. 准确地讲是对于“引用类型”而言. 那,在JavaScrip ...
- 在ASP.NET MVC的Action中直接接受客户端发送过来的HTML内容片段
出于安全的考虑,默认情况下,如果从客户端发送过来的数据中直接包括了HTML内容,ASP.NET会自动启动保护措施,你会收到下面的错误提示 这当然是一个不错的设计,只不过在某些特殊的事情,如果我们确实需 ...
- 通过SSH连接linux服务器
SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SSH 是目前较可靠,专 ...
- Percona博客学习总结
1. Upgrading to MySQL 5.7, focusing on temporal types 在MySQL 5.6.4中,对TIME, TIMESTAMP and DATETIME三种时 ...
- 1Z0-053 争议题目解析501
1Z0-053 争议题目解析501 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 501.Note the output of the following query; SQL&g ...
- [Java 基础]方法
方法的定义 Java方法是语句的集合,它们在一起执行一个功能. 方法是解决一类问题的步骤的有序组合 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 语法 修饰符 返回值类型 方法名 (参数 ...
- GitHub-版本控制
GitHub的使用:注册,登录,邮箱激活,创建第一个repository.如果branch是master,修改,提交,master直接改变. 稳妥起见创建另一个branch,修改,提交,再发出pull ...