0

Svelte 百度地图组件

2670   /   0   /   Posted on 4 years ago   /   Updated on 2021-03-12

Svelte 百度地图组件。新增演示，网址：https://svelte.worldlink.com.cn/examples，支持 REPL（交互式解释器）。

Svelte —— 真系一个神奇的框架（Magic Framework）！

03/12/21 组件文档基本完成，网址：https://svelte.worldlink.com.cn/docs。

09/06/20 新增地图组件演示页面，网址：https://svelte.worldlink.com.cn/examples，支持 REPL（交互式解释器）。

基于百度地图JavaScript Api SDK开发的Svelte组件。目前已初步实现基本的Map、Marker、MarkerList和常用的控件组件、以及本地搜素、路径规划功能。

作为一个编译型框架，性能表现突出。有兴趣的可以看一下demo页面的加载时间，本站的demo是包裹在一层php里面，演示中包含的MarkerList示例（页面下方的地图），是一个包含5365个海量点的地图加载演示。

在独立部署的情景下（前端Svelte，后端golang），单页面地图应用访问 DOMContentLoaded 加载时间：禁止缓存（Disable cache）在150ms左右；不禁止缓存的情况下落在100ms之内的几率也是有的，这个包括了加载字体的时间，以及与后端服务（此例后端基于golang开发）交互等的时间。

演示

安装

npm install --save @vulcangz/svelte-baidumaps

用法

简单使用参考：地图组件演示页面

在 Svelte 应用程序中使用:

首先您需要申请并取得地图api密钥。

该密钥可在百度地图开放平台官网申请。

基本用法 (Map)

Map 是容器组件，在 Map 上可构建各种不同的组件（性质上类似于 React 的子组件）。 

<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>

基本用法 (MarkerList)

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

<Map apiKey="your_api_key" options={ pointCollectionMapConfig }>
  <MarkerList markers={ data } />
  <NavigationControl />
  <ScalingControl />
</Map>
<script>
  import { Map, MarkerList, 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>

本地demo

在本地查看demo: 

    npm run dev

Todo

  • 其他组件
  • 测试
  • 文档

Credits & Inspiration

Like:
0
Tag:
To the top