Svelte 百度地图组件

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


To the top