typescript - Hur man importerar leaflet-control-geocoder i Angular 12.x?

Jag har installerat Leaflet i Angular 12 med följande kommandon:

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

Jag inkluderade stilarna: ./node_modules/leaflet/dist/leaflet.css i angular.json-filen och LeafletModule i min app.module.ts.

Kartan fungerar bra, men jag försöker lägga till sökfältet från geokodaren, för det har jag inkluderat länken och skriptet för geokodarlänkar i min index.html, som finns här.

Och detta är min ts-fil:

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);
 }

Men när jag gör L.Control.geocoder().addTo(this.map); får jag felet:

egenskapen 'geocoder' finns inte på typen 'typeof control'

Svar #1

Du har inte importerat biblioteket och dess stil:

1. Installera leaflet-control-geocoder

2. import "leaflet-control-geocoder/dist/Control.Geocoder.css";

3. import "leaflet-control-geocoder/dist/Control.Geocoder.js";

Det verkar också som att du inte använder ngx-leaflet utan vanlig leaflet istället. Om så är fallet bör du använda följande tillvägagångssätt:

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);
}

Initiera pluginet med (L.Control as any) för att undvika TypeScript-felet men felet du fick berodde på att du inte importerade biblioteket i förväg.

Demo