English | 简体中文
Svelte components based on Baidu Map JavaScript API package.
- Demo with REPL support: https://svelte.worldlink.com.cn/examples
- Simple Demo: https://vulcangz.github.io/svelte-baidumaps/demo/
npm install --save @vulcangz/svelte-baidumaps- Documentation: https://svelte.worldlink.com.cn/docs
- Simple reference: App.svelte
- Usage examples: Demo with REPL support
The key can be applied to the official website of Baidu map open platform
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>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>- Map
- NavigationControl
- MapTypeControl
- ScaleControl
- CopyrightControl
- OverviewMapControl
- CityListControl
- Marker
- MarkerList
- Circle
-
Icon - InfoWindow
- Label
- PointCollection
- Polygon
- Polyline
- LocalSearch
- Bus
- Transit
- Walking
- Driving
- LocalCity
- Autocomplete
- Menu
- Item
- test
docs