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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
dist
example rollup May 16, 2019
src 0.2.0 Apr 21, 2019
.babelrc
.gitignore rollup May 16, 2019
LICENSE Initial commit Apr 10, 2019
README.md 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

README.md

City Selector Control

npm npm

A City Selector Control for mapbox-gl

快速开始

使用 CDN

<script src="https://cdn.jsdelivr.net/npm/city-selector-control@0.2.2/dist/index.js"></script>
<link href="https://cdn.jsdelivr.net/npm/city-selector-control@0.2.2/dist/style.css" rel="stylesheet">
<div id='map' style='width: 800px; height: 600px;'></div>
<script>
  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');
</script>

模块化

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.