Giter VIP home page Giter VIP logo

cityselector-1's Introduction

微信小程序 城市/区县定位选择器(mpvue版本)

一款开箱即用的小程序城市/区县选择器

前两天在实现一个城市选择器的需求的时候,在github上看到了BeijiYang同学的开源项目,觉得做的非常不错,不过是基于原生小程序写的,所以就花了点时间把他的项目基于mpvue框架改写了。方便让使用mpvue框架的同学使用。

贴一下原项目的地址,还在使用小程序自带框架的同学可以使用这个库哦 项目地址

技术栈

javascript + es6 + mpvue + vuex

跟原项目相比 使用了vuex来管理数据,使数据管理更为方便,贴近真实mpvue项目

主要功能

  • 自动定位 城市、区县(也支持手动重新定位)
  • 手动 汉字、拼音搜索 城市,支持搜索数量335个,覆盖地级市
  • 亦可通过 侧边栏 选择,城市按拼音首字母排列
  • 选择好城市后,自动显示 辖下区县

动画演示

在真机预览的动画是非常流畅的

示例

运行

1、git clone
$ git clone https://github.com/originalix/citySelector.git

2、安装依赖
$ cd citySelector && npm install

3、启动程序
$ npm run dev

4、预览
打开微信开发者工具,新建项目,将目录指向 /dist 即可

勾选详情内不校验合法域名选项

说明

  • 使用(且小程序只能使用)腾讯地图的API
  • 将utils目录中,config.js文件中key换成自己申请的,目前只是我的测试key
  • 并将其中的key改为自己的腾讯地图key(申请快速且免费)
  • 直接作为模块使用,如果对您有帮助,请star

cityselector-1's People

Contributors

originalix avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.