@vulcangz/svelte-baidumaps

Svelte components based on Baidu Map JavaScript Api package

Usage no npm install needed!

<script type="module">
  import vulcangzSvelteBaidumaps from 'https://cdn.skypack.dev/@vulcangz/svelte-baidumaps';
</script>

README

svelte-baidumaps components

English | 简体中文

Svelte components based on Baidu Map JavaScript Api package.

Demo

Install

npm install --save @vulcangz/svelte-baidumaps

Usage

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