@vulcangz/svelte-baidumaps

svelte-baidumaps components

English | 简体中文

Svelte components based on Baidu Map JavaScript Api package.

Demo

• https://vulcangz.github.io/svelte-baidumaps/demo/
• Demo with REPL support

Install

npm install --save @vulcangz/svelte-baidumaps

Usage

• 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

• [x] Map

Control components

• [x] NavigationControl
• [x] MapTypeControl
• [x] ScaleControl
• [x] CopyrightControl
• [x] OverviewMapControl
• [x] CityListControl

Overlay components

• [x] Marker
• [x] MarkerList
• [x] Circle
• [x] Icon
• [x] InfoWindow
• [x] Label
• [x] PointCollection
• [x] Polygon
• [x] Polyline

Service components

• [x] LocalSearch
• [x] Bus
• [x] Transit
• [x] Walking
• [x] Driving
• [x] LocalCity
• [x] Autocomplete

ContextMenu components

• [x] Menu
• [x] Item

Todo

• test
• docs

Credits and Inspiration

• 百度地图开放平台
• Svelte framework & Context API
• Based on Svelte 3 Component Template
• beyonk-adventures/svelte-mapbox
• Dafrok/vue-baidu-map
• Material Design icons by Google