README-zh_CN.md

Svelte 百度地图组件

English | 简体中文

Svelte 百度地图组件基于百度地图 JavaScript API v2.0 类参考。

演示

• 交互式演示: https://svelte.worldlink.com.cn/examples
• 简单演示: https://vulcangz.github.io/svelte-baidumaps/demo/

用法

• 文档: https://svelte.worldlink.com.cn/docs
• 简单参考: App.svelte
• 交互式演示: Demo with REPL support

在 Svelte 应用中使用:

首先您需要申请并取得地图 API 密钥:

API 密钥可以在 百度地图开放平台官方网站 申请。

基本用法（Map）

Map 是容器组件，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 './components/components.module.js'

  let baseMapConfig = {
    label: "this is a map base demo",
    address: "china beijing",
    lng: "116.404",
    lat: "39.915",
    zoom: 15
  };
</script>

基本用法（PointCollection）

有关此 API 的更多信息，请参见 PointCollection。

<Map apiKey="your_api_key" options={ pointCollectionMapConfig }>
  <PointCollection markers={ data } />
  <NavigationControl />
  <ScalingControl />
</Map>

<script>
  import { Map, PointCollection, NavigationControl, GeolocationControl } from './components/components.module.js'
  import { data } from './your-data.js';

  let pointCollectionMapConfig = {
    label: "this is map point collection demo",
    address: "china beijing",
    lng: "105.000",
    lat: "38.000",
    zoom: 12
	}; 
</script>

本地开发

要查看简单的应用演示：

npm run dev

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

致谢及参考

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