如何在Angular 12.x中导入传单控制地理编码器

Question

我使用以下命令在angular 12中安装了传单：

npm install leaflet
npm install @asymmetrik/ngx-leaflet
npm install --save-dev @types/leaflet

我在angular.json文件中包含了样式：./node_modules/leaflet/dist/leaflet.css，在我的app.module.ts中包含了LeafletModule。

地图工作得很好，但是，我正在尝试添加来自geocoder的搜索输入控件，为此，我在index.html中包含了geocoder链接的链接和脚本，可以在这里找到。

这是我的ts文件：

import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
title = 'leaf-let';
private map: any;
constructor() {}
ngAfterViewInit(): void {
this.initMap();
}
private initMap(): void {
this.map = L.map('map').setView([14.094167, -87.206667], 15);
const tiles = L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 19,
attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> ` 
`contributors',
}
);
tiles.addTo(this.map);
//L.Control.geocoder().addTo(this.map);
}

但当我做L.Control.geocoder().addTo(this.map);时，它会给我一个错误：

属性"geocoder"在类型"typeof control"上不存在

Answer 1

您尚未导入库及其样式：

1. 安装传单控制地理编码器
2. import "leaflet-control-geocoder/dist/Control.Geocoder.css";
3. import "leaflet-control-geocoder/dist/Control.Geocoder.js";

此外，您似乎没有使用ngx传单，而是使用香草传单。如果是这样的话，你应该采用以下方法：

private initMap(): void {
this.map = L.map("map").setView([14.094167, -87.206667], 15);
const tiles = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(this.map);
tiles.addTo(this.map);
(L.Control as any).geocoder().addTo(this.map);
}

使用(L.Control as any)初始化插件以避免出现typescript错误，但您收到的错误是因为您没有提前导入库。

演示