对城市名搜索(汉字、拼音)功能的改进 / 小程序城市区县定位模块改进

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Beijiyang999/article/details/77985416

效果演示

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

gif

###支持搜索335个城市(及相应级别地区)。截至目前,最新的国家统计局2016年统计年鉴中,地级市291个,地级行政区划334个。

项目仓库

微信小程序 城市/区县定位选择模块 汉字/拼音搜索 可直接使用


更新 注:项目代码已重构。如有帮助请 start。


改进的问题

小程序项目中需要城市区县定位功能,就自己写了个小程序城市/区县定位选择模块,支持汉字、拼音搜索,之前一篇文章介绍了城市名搜索功能的实现。

后发现有的地级市搜不到,必须从侧边栏搜索首字母,再点击选择。原因在于对应城市名-拼音名的JSON数据不全。为了提升用户体验,决定改进下。

思路

目前城市数据的结构:

[
	...,
	{ id: '8',
	  provincecode: '130000',
	  city: '张家口市',
	  code: '130700',
	  initial: 'Z',
	  short: 'Zhangjiajie' },
	...
]

为了不动代码逻辑,通过仅仅修改数据达到目的,决定在目前城市数据的基础上,增加一条拼音属性。方法是,利用新找的数据,对旧有数据进行匹配和填充。

[	...
	{ label: '张家口Zhangjiakou0313',
	  name: '张家口',
	  pinyin: 'Zhangjiakou',
	  zip: '0313' },
	...	
]

问题一

地名格式差异


地区
X族自治州

虽然字符串尾部不统一,但地名头部一般不重复,可以考虑只匹配前两个字

...

cityObj.map(                  //项目中原有的,待补充的
  (item) => {
    biggerObj.map(           //后找的,更全的
      (bItem) => {
        if (item.city.slice(0,2) === bItem.name.slice(0,2)) {
          item.short = bItem.pinyin
          tempArr.push(item)
        }
      }
    )
  }
)


console.log(tempArr.length)           //经过加工,增加了属性的
console.log('cityObj:  '+cityObj.length) //项目原有的

输出

347
cityObj: 337

问题二

发现得到的数字竟然比原来长10,说明有重复匹配现象

利用变量计数,发现重复的

let tempArr = []

cityObj.map(
  (item) => {
    let a = 0
    biggerObj.map(
      (bItem) => {
        if ((a === 0) && (item.city.slice(0,2) === bItem.name.slice(0,2))) {
          item.short = bItem.pinyin
          tempArr.push(item)
          a++

        } else if ((a !== 0) && (item.city.slice(0,2) === bItem.name.slice(0,2))) {
           console.log(a)
            console.log(item)
             console.log(bItem)
              console.log("---------------------------")
        }
      }
    )
  }
)


输出

1
{ id: ‘31’,
provincecode: ‘150000’,
city: ‘巴彦淖尔市’,
code: ‘150800’,
initial: ‘B’,
short: ‘Bayannaoer’ }
{ label: ‘巴彦Bayan0451’, name: ‘巴彦’, pinyin: ‘Bayan’, zip: ‘0451’ } ---------------------------
1
{ id: ‘163’,
provincecode: ‘410000’,
city: ‘三门峡市’,
code: ‘411200’,
initial: ‘S’,
short: ‘Sanmenxia’ }
{ label: ‘三门Sanmen0576’,
name: ‘三门’,
pinyin: ‘Sanmen’,
zip: ‘0576’ } ---------------------------
1
{ id: ‘8’,
provincecode: ‘130000’,
city: ‘张家口市’,
code: ‘130700’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家口Zhangjiakou0313’,
name: ‘张家口’,
pinyin: ‘Zhangjiakou’,
zip: ‘0313’ } ---------------------------
1
{ id: ‘8’,
provincecode: ‘130000’,
city: ‘张家口市’,
code: ‘130700’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家港Zhangjiagang0512’,
name: ‘张家港’,
pinyin: ‘Zhangjiagang’,
zip: ‘0512’ } ---------------------------
1
{ id: ‘190’,
provincecode: ‘430000’,
city: ‘张家界市’,
code: ‘430800’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家口Zhangjiakou0313’,
name: ‘张家口’,
pinyin: ‘Zhangjiakou’,
zip: ‘0313’ } ---------------------------
1
{ id: ‘190’,
provincecode: ‘430000’,
city: ‘张家界市’,
code: ‘430800’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家港Zhangjiagang0512’,
name: ‘张家港’,
pinyin: ‘Zhangjiagang’,
zip: '0512’ }

335 //经过加工,增加了属性的
cityObj: 337 //项目原有的

由此

  • 发现了重复匹配的,就两三个,手动改了。

  • 看数字,还少了两个,说明长列表里有缺少的,检查一下

  cityObj.map(
        (item) => {
          let a = 0
          biggerObj.map(
            (bItem) => {
              if (item.city.slice(0,2) === bItem.name.slice(0,2)) {
                item.short = bItem.pinyin
                tempArr.push(item)
                a++
              }
            }
          )

	if (a===0) {
	 console.log("----------")
	 console.log(item)
	} 

	}
  )

发现是后者缺了这两个
荷泽市
普洱市
手动加上

##导出使用
最后用fs模块导出,保存使用。
关于fs模块的使用,参考这一篇的代码

然后又优化了一下样式

项目仓库

微信小程序 城市/区县定位选择模块 汉字/拼音搜索 可直接使用

效果演示

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

gif

展开阅读全文

没有更多推荐了,返回首页