@acpaas-ui-widgets/ngx-location-picker-leaflet 中文文档教程

Question

Location Picker with Leaflet Smart Widget UI (Angular)

这是用于智能小部件的 Angular 6+ UI，它实现了一个选择器字段，以结合 Leaflet 选择一个位置（街道、地址或兴趣点）。 它与 相应的后端服务 匹配，在远程模式下运行时需要该服务。 提供了在安特卫普选择位置的默认实现。

有一个演示应用程序，请参阅下面的运行说明。

How to use

Installing

> npm install @acpaas-ui-widgets/ngx-location-picker-leaflet

Using

BFF 服务应该正在运行（请参阅下面的演示应用程序说明以了解如何启动一个）。

在您的模块中导入组件：

import { LocationPickerLeafletModule } from '@acpaas-ui-widgets/ngx-location-picker-leaflet';

@NgModule({
  imports: [
    ...,
    LocationPickerLeafletModule
  ],
  ...
})

在 index.html 中，包括核心品牌样式表：

<link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/4.1.1/main.min.css">

对于仍在使用 Angular 5 的项目，我们是 维护一个 v1 分支，如果需要，该分支仍会收到错误修复。

> npm install @acpaas-ui-widgets/ngx-location-picker-leaflet"<2.0.0"

In your template:

<aui-location-picker-leaflet class="widget"
    [coordinatesTrigger]="triggerNoSubject"
    [coordinatesTriggerSubject]="trigger"
    [locationApiHost]="http://localhost:9999/api/locations"
    (locationChange)="addressResolvedCallback($event)"
></aui-location-picker-leaflet>

（替换 BFF 服务的 url）

在组件代码中：

class YourComponent {

    addressResolvedCallback = (location) => {
        console.log(location);
    };

    ...
}

支持列表中的每个值都必须有一个唯一的 id。

Supported attributes

• locationPickerUrl: (string) required URL of the back-end service feeding this widget
• coordinatesTriggerSubject: (BehaviorSubject({ lat: number, lng: number })) can be used to trigger an external location change
• coordinatesTrigger: (Object({ lat: number, lng: number })) when set will retrieve location by coordinates
• locationPickerEndpoint: (string) when /api/location is not default endpoint
• coordinatesEndpoint: (string) when /api/coordinates is not default endpoint
• useExternalOffset: (boolean) wether or not to use the default location as offset

Events

• locationChange: locationItem model that is triggered when the current value is changed (or cleared)
• mapLocationChange: a [number,number] object with the marker position that is triggered each time the map moves

Protocol

后端服务实现以下协议：

• GET /path/to/endpoint?search=…&types=…
• search: the text that the user typed on which to match
• types: a comma-separated list of types to return, default value = "street,number,poi"
• result: JSON-encoded array of LocationPickerV1Value objects

Run the demo app

> npm install
> npm start

浏览到 localhost:4200

要使用此小部件，您还需要运行 支持服务。

Contributing

我们欢迎您的错误报告和拉取请求。

请参阅我们的贡献指南。

License

该项目根据 MIT 许可发布。