Skip to content
A City Selector Control for Mapbox GL JS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
example rollup May 16, 2019
src 0.2.0 Apr 21, 2019
.gitignore rollup May 16, 2019
LICENSE Initial commit Apr 10, 2019 update May 16, 2019
package.json update May 16, 2019
rollup.config.js rollup May 16, 2019
style.css 0.2.0 Apr 21, 2019

City Selector Control

npm npm

A City Selector Control for mapbox-gl


使用 CDN

<script src=""></script>
<link href="" rel="stylesheet">
<div id='map' style='width: 800px; height: 600px;'></div>
  mapboxgl.accessToken = '<your access token here>';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9'
  map.addControl(new CitySelectorControl(), 'top-right');


npm i city-selector-control
import CitySelectorControl from 'city-selector-control'
import 'city-selector-control/style.css'
// 默认选项
map.addControl(new CitySelectorControl(), 'top-right')

// 自定义
const citySelectorOptions = {
  theme: 'dark',
  placeholder: '全国',
  hot: ['110000', '340500'],
  zoom: 12
map.addControl(new CitySelectorControl(citySelectorOptions), 'top-right');


# 名称 类型 描述 默认值
1 theme String 主题, 可选 'light''dark'. 'light'
2 placeholder String 初始化时的文本. '请选择'
2 hot Array 热门城市编码,可为空 []. ['440100', '440300', '330100', '510100']
2 zoom Number 选择城市后的缩放级别. 10


theme default

You can’t perform that action at this time.