как я могу передать лат, длинный снаружи, чтобы создать маркер листовки angular - PullRequest
Новая
       88

как я могу передать лат, длинный снаружи, чтобы создать маркер листовки angular

0 голосов
/ 11 апреля 2020

  • Это рабочий код для размещения маркера с использованием листка angular для предопределенных значений lat, long.

    Теперь я хочу настроить это, передав значение lat, long, когда кнопка addmarker нажат. Кто-нибудь может посоветовать?

    Длинная информация в латах недоступна при загрузке страницы и должна передаваться только при нажатии кнопки добавления маркера. 

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>

1 Ответ

1 голос
/ 11 апреля 2020

Вы передаете нужные координаты в качестве аргументов addMarker() следующим образом: 

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

Вам не нужны getLatLong и другая кнопка

И затем, используя экземпляр карты, вы изменяете центр карты: 

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

Демо

...