我如何从外面通过经纬度来创建传单标记 angular

Question

这是一个使用传单 angular 放置标记的工作代码预定义的经纬度。

现在我想通过在添加标记时传递经纬度来自定义它按钮被按下。任何人都可以建议吗？

经纬度信息在页面加载时不可用，必须仅在按下添加标记按钮时传递。

import { Component, OnChanges } from "@angular/core";
import "leaflet/dist/leaflet.css";
import * as L from "leaflet";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  map;
  markers: L.Layer[] = [];


  markerIcon = {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      // specify the path here
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    })
  };

  public options = {
    layers: [
      L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        maxZoom: 18,
        attribution: ""
      })
    ],
    zoom: 10,
    center: L.latLng(40.7128, 74.0060)
    //center: L.latLng(this.lat, this.long);
  };

getLatLong() {
this.lat = 40.7128;
this.long = 74.0060;
this.addMarker(this.lat, this.long);

  }


  addMarker(lat, long) {

    const newMarker = L.marker([40.7128, 74.0060], this.markerIcon);
    //const newMarker = L.marker([this.lat, this.long], this.markerIcon);

    this.markers.push(newMarker);

    newMarker.addTo(this.map);
  }

  onMapReady(map: L.Map) {
    this.map = map;
    // Do stuff with map
  }
}

<div
style="height: 90vh;"
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)"
></div>

<button (click)="addMarker()">
add marker
</button>
<button (click)="getLatLong()">
  getLAtLong
  </button>

Answer 1

你可以像这样在 addMarker() 上传递你想要的坐标作为参数：

<button (click)="addMarker(46.8523, -121.7603)">
  add marker
</button>

您不需要 getLatLong 和另一个按钮

然后使用地图实例更改地图中心：

this.map.panTo(new L.LatLng(lat, lng));

Demo

我如何从外面通过经纬度来创建传单标记 angular

how can i pass lat,long from outside to create a leaflet marker angular

angular

typescript

leaflet

gis

ngx-leaflet