Svelte Baidumaps
Set of Baidu maps components for Svelte
svelte-baidumaps components
English | 简体中文
Svelte components based on Baidu Map JavaScript API package.
Demo
- Demo with REPL support: https://svelte.worldlink.com.cn/examples
- Simple Demo: https://vulcangz.github.io/svelte-baidumaps/demo/
Install
npm install --save @vulcangz/svelte-baidumaps
Usage
- Documentation: https://svelte.worldlink.com.cn/docs
- Simple reference: App.svelte
- Usage examples: Demo with REPL support
To use within a Svelte application:
1. First you need to request and obtain the map api key:
The key can be applied to the official website of Baidu map open platform
2. Basic Usage (Map)
The container component is the map, and there are a variety of components which go on the map.
<Map apiKey="your_api_key" options={ baseMapConfig } withCenterMarker={ true } >
<Marker lat={someLat} lng={someLng} label="text label" /> // built in Marker component
<NavigationControl />
<ScaleControl />
</Map>
<script>
import { Map, Marker, NavigationControl, ScaleControl } from '@vulcangz/svelte-baidumaps'
let baseMapConfig = {
label: "this is a map base demo",
address: "china beijing",
lng: "116.404",
lat: "39.915",
zoom: 15
};
</script>
3. Basic Usage (PointCollection)
See PointCollection for more information on API.
<Map apiKey="your_api_key" options={ pointCollectionMapConfig }>
<PointCollection markers={ data } />
<NavigationControl />
<ScalingControl />
</Map>
<script>
import { Map, PointCollection, NavigationControl, GeolocationControl } from '@vulcangz/svelte-baidumaps'
import { data } from './your-marker-points-data.js';
let pointCollectionMapConfig = {
label: "this is map point collection demo",
address: "china beijing",
lng: "105.000",
lat: "38.000",
zoom: 12
};
</script>
Components
Core component
- Map
Control components
- NavigationControl
- MapTypeControl
- ScaleControl
- CopyrightControl
- OverviewMapControl
- CityListControl
Overlay components
- Marker
- MarkerList
- Circle
-
Icon - InfoWindow
- Label
- PointCollection
- Polygon
- Polyline
Service components
- LocalSearch
- Bus
- Transit
- Walking
- Driving
- LocalCity
- Autocomplete
ContextMenu components
- Menu
- Item
Todo
- test
docs
Credits and Inspiration
