概述 本文讲述如何在前端实现城市首字母导航的效果。...map.getView().setZoom(8); }); } } } }) } //汉字拼音首字母列表...也可以调用自己的处理函数 if (uni > 40869 || uni < 19968) return ch; //dealWithOthers(ch); //检查是否是多音字,是按多音字处理...,不是就直接在strChineseFirstPY字符串中找对应的首字母 return (oMultiDiff[uni] ?
省份/城市/区县定位选择器 :dash::rocket: 微信小程序，一行代码引入的省份/城市/区县定位选择器的库 主要功能 自动定位 城市、区县（也支持手动重新定位） 手动 汉字、拼音搜索 城市，支持搜索数量...335个，覆盖地级市 亦可通过 侧边栏 选择，城市按拼音首字母排列 选择好城市后，自动显示 辖下区县 集成说明 将libs文件夹拷贝至您的小程序项目根目录 在您的项目根目录 app.json 里的 pages...数组里增加一行 "libs/citySelector/switchcity/switchcity" 打开项目里的 /libs/citySelector/config.default.js 文件 将其中的...点击立即打开腾讯地图Key申请页面 快速使用 在您要打开选择器地方用navigator组件，将url设置为 "/libs/citySelector/switchcity/switchcity" 或者，在 JS.../区县数据设置到本页面的 this.data.address 内 如图所示 修改颜色样式 在libs文件夹搜索 #c60a0d ，替换为您想要的颜色值即可 功能演示 Gif有点卡，不过实际操作起来是超级流畅的
开始项目时，还需要启动另一个项目middleware充当中间件请求weather接口 功能 地址定位 当前定位天气情况 24小时天气情况 7天天气情况 当前地址相关指数 搜索地址...iconfont 字体图片 - images 可以将图片放在服务器请求（减少文件体积） index 指数图片 weather 天气描述图片 - libs city-code.js...城市代码文件 makePy.js 文字转拼音首字母 qqmap-wx-jssdk.min.js 腾讯地图 weather.js 天气描述 - pages weather...天气首页 search 搜索地址页 - server type.js 请求地址 - utils 工具文件 ?
首先从布局开始，这个页面的布局结构由三个主要部分构成，页面顶部的搜索框，页面最右侧的字母列表栏，以及左边的最主要的城市列表部分。具体的页面代码我就不贴了，github链接我会放在文章尾部。...我们将地级市的数据存放到本地的city.js文件中，在这个city.js的文件中，还同时包括城市检索的首字母的数组数据，页面的城市列表以及首字母检索的数据就会从city.js中读取。...在页面生命周期开始时，我们得获取当前设备的屏幕高度，用以计算右侧首字母列表的单个item高度，并且要将首字母检索的数组重组结构，最后绑定到当前页面的data下，如下的逻辑 const searchLetter...在点击了城市的Cell之后，接下来的操作就是通过腾讯地图API去请求接口，获取当前城市的附属区县数据，展示并可以再次点选。...我们的搜索框要求能够通过汉字或者拼音搜索，所以在搜索逻辑中，我们根据对象的short和shorter属性来进行匹配，具体的逻辑可以看如下代码: /** * 搜索匹配逻辑 */ auto() {
背景： 之前一直是前端直接调用公司公共城市组件获取城市列表，现在由于公共组件不再支持，需要由后端接口提供城市查询，并且按照城市首字母分组展示。...后端实现： 最开始选择pinyin4j来实现，但发现对多音字的处理不太友好，比如需要转重庆的拼音(可以看到结果并不是我们想要的)： 解决方法就需要自己定义多音字字典来实现，解析这个文件优先从这个文件中获取拼音...，类似如下文件(字典格式可自行定义)： 以上自己定义字典的方式比较麻烦，经过在网上的一顿搜索，发现可以使用具有语义的依赖包(底层也是用的自定义字典实现)： portable-1.8.3复制代码在项目中定义一个工具类：public class PinyinUtil { /** * 获取中文完整拼音...pinyin.getPinyinWithoutTone()); } return stringBuilder.toString(); } /** * 获取中文拼音首字母
项目演示地址 高仿美团网 源码下载 码云 项目介绍 前端 ：Nuxt.js/vue-router/ Vuex/ ELement-ui 后端 ：Node.js/Koa2/Koa-router/Nodemailer.../Passport HTTP通讯 ：Axios 数据支撑 ：Mongoose/Redis/高德地图web服务api接口 实现功能 登录注册，qq邮箱自动发验证码 城市切换：更新不同城市的信息...search搜索，根据当前城市进行用POI的关键字进行条件搜索 高德地图自动定位 项目安装 先安装npx npm install -g npx 然后用npx安装模板 npx create-nuxt-app...； 或者把data里的this暂时存起来_this=this; 导入数据库 mongoimport -d dbs -c test pois.dat ssr:服务端直接打在网页上的源码，不需要重渲染 拼音库...可以实现那汉字转拼音 npm i js-pinyin js按照数组里元素的首字母排序 如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字
我们需要输入出发城市、到达城市，出发时间默认为当天，需要修改成第二天及以后，以防由于0点至当前时间点的车次不显示，导致爬取信息不全。 我在杭州，就以杭州东站为出发点，搜索上海为例吧。 ?...按我的（并不多的）经验，一般情况下，不管三七二十一，全部传进去就完事儿了！ ? 这是我以杭州东站为出发点，上海为目的地，得到的所有班次信息： ?...https://webresource.ctrip.com/ResTrainOnline/R1/TrainBooking/JS/hotline.min.js?...部分城市对应着两个拼音，比如“杭州东”对应有两串拼音：“hangzhoudong”和“hzd@hangzhou”，我不清楚里面的逻辑。...但是我们只要获得城市的名字即可，因此我也删去了包含“@”关键词的拼音部分。 最后得到如下： ? 一共有2804个城市！ 接下来就是批量爬取了，文明爬虫，从我做起，每次更换城市的时候记得休息一会儿哦?
： 多端结果一致 转换速度快 内存占用低 转换结果长度可控 字库、词库可动态下发 3.1.1 基于JS引擎的汉字转拼音方案 在跨平台技术选型上，零售移动选择 JS 引擎解决两端数据一致性问题。...JS 引擎能够解析执行 JS 脚本，帮助移动端进行跨平台开发。...在使用笛卡尔积形式时判断生成的字符串是否超过指定的长度阈值，若有超过阈值的问题，则多音使用汉字拼音表中默认的拼音。 3.1.6 商品名拼音首字母 搜索除了拼音全拼，拼音首字母也是很常见的场景。...不过有了全拼的解决方案后，拼音首字母相对来简单很多，只须在获取获取汉字拼音时，取到拼音的首字母后组合即可。 解决了商品名中文转拼音问题后，就可以愉快地进行搜索本地商品啦。...3.2 商品模糊搜索 应用场景：收银也拼音模糊匹配，搜索商品。 商品搜索逻辑相对比较简单：搜索时模糊匹配商品的拼音或条码。
从12月26日开始，博客接入 Google Analytics 系统，截止到 2018年8月2日，大约250天里，10,444 个用户访问了31,251 个页面；有意思的事情是，访客数量最多的城市按顺序分别是...还有 10% 的人回答了以前的老域名，不用担心他们还是能找到路的…… 剩下的访客……你们就用各大搜索引擎搜索惶心好了……反正都可以搜到。...斜杠后面的部分，是应用名称，这里可以以三种方式呈现——以“网易云音乐”为例子： https://get.js.org/wangyiyunyinyue - “网易云音乐的拼音” https://get.js.org.../wyyyy - ”网易云音乐拼音的首字母简写“ https://get.js.org/cloudmusic - ”网易云音乐的英文名“ 综上 - 获取一个应用的方式可以使用拼音全名，拼音缩写，以及英文名称...//get.js.org/wechat https://get.js.org/wangyiyunyinyue https://get.js.org/qqyinyue https://get.js.org
简单介绍一下搜狗输入法： 搜狗是中国互联网领先的搜索、输入法、浏览器和其它互联网产品及服务提供商。...而搜狗拼音输入法是当前网上最流行、用户好评率最高、功能最强大的拼音输入法，并且承诺永久免费、绝无插件。搜狗输入法首创性的采用了搜索引擎技术，输入速度有了质的飞跃。...1、不切换英文格式下快速输入英文 一般来说，输入法默认是按下“Shift"键就切换到英文输入状态，再按一下“Shift"键就会返回中文状态。...3、不会读的生字可以通过U模式笔画输入，输入后可以看到拼音 用拼音打字，总会遇到不会读的字，这时候就用U模式笔画输入： ? U+横竖撇捺折hspnz，可以快速输入不会读的字。...4、利用拆字辅助码快速找到你所需要的字 拆字辅助码让你快速的定位到一个单字，使用方法如下： 例如【鹅】，但是非常靠后，找不到，那么输入【e】，然后按下【tab】键，在输入【鹅】的两部分【我】【鸟】的首字母
在学习vue实现手机通讯录的功能之前，我们首先要了解如何将汉字转为拼音并获取其首字母，以下为汉字转拼音插件： 1. 新建 const.js 文件，定义常量。...代码太长就不贴了，需要的请参考下面原文链接的文章：vue集成汉字转拼音插件 2. 新建 vue-py.js 文件，实现汉字转拼音功能： import { pinyin } from '..../const.js' export default { chineseToPinYin: function (l1) { var l2 = l1.length var I1 = ''...) //获取汉字拼音首字母 let namePinyin = vPinyin.chineseToPinYin(salesmanName.substring(0, 1)); firstPinyin = namePinyin.substring...== '') { //获取汉字拼音首字母 let namePinyin = vPinyin.chineseToPinYin(salesmanName.substring
本文简介 这次要推荐一个在前端就能实现 汉字转拼音 的工具库 —— pinyin-pro 。 这个库不止能把中文转成拼音输出，还有拼音匹配、获取声母、获取韵母、获取拼音首字母等功能。...特色功能 获取汉字、词语、句子等多种格式的拼音 获取声母 获取韵母 获取拼音首字母 获取音调 获取多音字的多种拼音 支持人名姓氏模式 支持自定义拼音 支持字符串和数组两种输出形式 支持拼音文本匹配功能...引入某个版本，如3.5.0版本 --> </...Object 类型，用于配置各种输出形式，options 的键值配置如下： 参数 说明 类型 可选值 默认值 pattern 输出的结果的信息（拼音 / 声母 / 韵母 / 音调 / 首字母） string
相信绝大部分LBS的APP里面，大家都能看到一个带索引的城市列表页面，用来让用户选择所在城市。...我们就一步一步的来实现这个页面，最终效果如下： Paste_Image.png 最终我们会按照首字母汉语拼音对所有城市进行排序，可以通过右侧的首字母索引来快速定位到城市。 1....从plist中获取城市字典 1.1 准备素材，下载文件 城市列表（带拼音首字母的），下载地址： 链接: https://pan.baidu.com/s/1nV**YJJ 密码: cjpw...1.2 从plist中读取出所有的城市。...对城市的首字母进行排序 对所有字典key的数组中的内容进行排序 对于排序，系统提供了两种办法可以进行排序。我们就不用再写什么冒泡儿、选择之类的算法了，直接来就可以用。
先必须介绍下相关的变量 变量：private String[] sections;// 存放存在的汉语拼音首字母 就是当前城市名称是开头的字母是什么，放在这个数组 // 里面 ，...; // 存放存在的汉语拼音首字母和与之对应的列表位置 // 这个变量就是 A 字母 应该放在视图上面列表的哪个位置 例如下图中的M 和N 看图解释： 所以创造出自己的Adapter...for (int i = 0; i < list.size(); i++) { // 当前汉语拼音首字母 String currentStr = list.get(i).getNameSort...();//list.get(i)是一个类 // 上一个汉语拼音首字母，如果不存在为“ ” String previewStr = (i - 1) >= 0 ?...(); alphaIndexer.put(name, i);//放一个i 这个i很重要，它表示"M"显示在哪里 sections[i] = name;//当前的这个i对应的城市的名称的首字母
概述 工作中经常会遇到的一些排序问题，比如 按汉字的拼音首字母排序，比如人名排序等，就要用到下面的方法了，思路： 1.获得汉字 2.将汉字转换成首字母，并记录下（必要时保存到数据库) 3.按首字母进行排序并展示...演示 控制台输出演示： 汉字转首字母演示，请输入汉字： 4654*&&^_FDSF你i好3啊>?...void main(String[] args) { Scanner sc = new Scanner(System.in); System.out.println("汉字转首字母演示...System.out.print("\r\n仅保留字母和数字convertAndClearAll：" + py3); } } package pinyin; /** * 汉字转首字母缩写...3 http://home.cnblogs.com/u/vir56k/ * */ public class ChineseToFirstCharUtil { /** * 汉字转拼音缩写
有时在处理文件时候，我们需要将中文汉字转换为拼音或者拼音首字母的需求；还有的时候，我们需要对汉字进行按拼音字母排序（汉字的默认排序是编码序而非拼音序）。...有时需要中文名转拼音首字母，也很简单? ?...下面是中文名转拼音首字母的方法 ?...最后是中文名转拼音首字母 ?...'] = first_pinyin df.head() 或者是转换为拼音首字母，运行结果如下： ?
\拼音\首字母"; } else { response = "您说的，可惜，我没明白啊，试试其他关键字吧...用户请求，只需输入：tq 城市名称/拼音/首字母，即可获取消息。.../// /// 城市名称、拼音或首字母 /// public string Name { get; set; } /// /// 拼音... public string PinYin { get; set; } /// /// 拼音首字母
下次打开优先选取上次定位城市，如本次定位和上次不一样，则取本地城市，同时展示最近选择的城市，最近选择的城市可配 城市列表按字母分组，如B组：北京、包头，同时左侧带A-Z导航符条，点击对应字母定位至对应的组位置...，如点击C则定位至C组，同时弹出提示为C 支持城市搜索，页头带搜索框，可支持联想功能，注意性能 选择对应城市，会将对应城市数据带回给使用页面 支持单个页面上同时存在多个城市组件 页面用flex布局（css...格式化之后的格式是按照拼音字母来区分的: ?...需要定位的城市区域（分为最近城市和热门城市） 列表区域 右侧导航区域 搜索弹层区域 具体可以参看src/components/city下的组件 最近选择城市 采用的是本地localstorage进行存储...搜索联动 支持中/英文搜索，中文搜索是进行了全数据遍历，英文搜索是进行了首字符判断，然后再进行子集遍历。在搜索方面，使用了函数节流，如果在1秒中之内还没有输入完成，则必须进行一次搜索。
中文候选栏 中文输入候选栏ChineseWidget使用QListWidget和样式表实现： setText输入对应拼音字母，即会加载符合的拼音中文。...pressedChanged信号函数即为当按键按下，传递对应的中文。...regExp.matchedLength()); // 分离中文 QList> &tmp = m_data[first.left(1)]; // 取首字母做索引...tmp.append(qMakePair(first, second)); } 部分字库内容预览： 安a 按a 爱a 阿a 暗a 啊a 埃a 碍a 凹a 奥a 岸a 矮a 案a 俺a 匹配符合拼音的中文...取拼音首字母索引，再匹配中文。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
