介绍
web-city-selection 是一个可以快速在网站上添加城市选择器的 npm 包，具有以下特点：
- 支持中英文语言切换
- 支持快速定位用户所在城市
- 支持搜索选择城市
- 自适应多种屏幕尺寸
本文将介绍如何使用 web-city-selection。
安装
npm install web-city-selection
基本用法
在页面上添加一个空的 div 元素：
<div id="city-selection"></div>
然后，在 JavaScript 中初始化 web-city-selection：
import WebCitySelection from 'web-city-selection';
const citySelection = new WebCitySelection('#city-selection');
citySelection.init();这样就可以在 #city-selection 元素内看到城市选择器了。
定位到用户所在城市
可以通过 WebCitySelection 的 #locate() 方法来定位到用户所在城市：
citySelection.locate()
.then(cityName => {
console.log(`您所在的城市是：${cityName}`);
})
.catch(error => {
console.error(error);
});搜索选择城市
城市选择器支持输入关键字搜索城市，我们可以通过监听 WebCitySelection 的 #search() 方法返回的 promise 来获取搜索结果：
citySelection.search('上海')
.then(result => {
console.log(result);
});高级用法
web-city-selection 还提供了一些高级用法，可以进行更加细致的设置，包括：
- 改变语言
- 自定义数据源
改变语言
web-city-selection 默认支持中英文语言切换，可以通过 WebCitySelection 的 #setLanguage() 方法来设置语言：
citySelection.setLanguage('en');当前支持的语言有中文（默认）和英文。
自定义数据源
web-city-selection 默认使用的是从 GitHub 上获取的数据源，但是我们也可以使用自己的数据源。在初始化时，我们可以传入一个 URL 或数据本身，用来自定义数据源：
-- -------------------- ---- -------
----- ---- - -
-
------- ------
----------- -
-
------- -----
--
-
------- -----
-
-
--
-
------- ------
----------- -
-
------- ------
--
-
------- -----
-
-
-
--
----- ------------- - --- ----------------------------------- - ---- ---
---------------------以上数据来源于 data 变量，我们也可以将它放在一个 URL 上，然后通过传入 URL 来使用：
const options = {
data: 'https://my-url.com/city-data.json'
};
const citySelection = new WebCitySelection('#city-selection', options);
citySelection.init();示例代码
你可以在 GitHub 上找到完整的示例代码，里面包含了使用 web-city-selection 的一些常见操作，包括：
- 基本初始化
- 定位到用户所在城市
- 搜索选择城市
- 改变语言
- 自定义数据源
总结
web-city-selection 是一个非常实用的城市选择器 npm 包，可以极大地帮助我们在网站中快速添加城市选择器功能。本文介绍了 web-city-selection 的安装、基本用法和一些高级用法，如果你正在寻找一个简单易用的城市选择器，那么 web-city-selection 一定会是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8d81e8991b448db4dd