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

太过爱你忘了你带给我的痛 2022-06-08 04:44 131阅读 0赞

# 效果演示 #

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

![gif][]

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

# 项目仓库 #

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

--------------------

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

--------------------

# 改进的问题 #

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

后发现有的地级市搜不到，必须从侧边栏搜索首字母，再点击选择。原因在于对应城市名-拼音名的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模块的使用，参考[这一篇][Link 2]的代码

然后又优化了一下样式

# 项目仓库 #

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

# 效果演示 #

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

![gif][]

[gif]: /images/20220608/50f6a261e6fe4151bbe12922504602b9.png
[2016]: http://www.stats.gov.cn/tjsj/ndsj/2016/indexch.htm
[_ _]: https://github.com/BeijiYang/citySelector
[Link 1]: http://blog.csdn.net/beijiyang999/article/details/73135682
[Link 2]: http://blog.csdn.net/beijiyang999/article/details/73436824