如何在Angular组件中向Leaflet地图添加标记

Question

I am using leaflet on an Angular app and I am showing some markers located in the coordinates that I retrieve from the back-end.

With the code at the end of the post, markers are shown but they don´t keep the position on differents zoom level, as you can see on the following images.

The markers should be over the red points, but they are in another location, and it seems that they don´t keep the position when I do zoom in or out. It looks like that the points are on a different layer with a different reference system.

I have tried to keep the mMarker.prototype.options.icon on a variable and use addTo(map), but it throws an error that says "addTo" is not a function.

What can I do? Thanks

import { Component, OnInit } from '@angular/core';
import { MapService } from '../../services/map.service';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Map } from '../../models/map';

import { Icon, icon, Marker, marker } from 'leaflet';

declare let L;
var map;

@Component({
  selector: 'map-component',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  private defaultIcon: Icon = icon({
    iconUrl: 'assets/leaflet/marker-icon.png',
    shadowUrl: 'assets/leaflet/marker-shadow.png'
  });

  public coordinates: [number];
  constructor(
    private _mapService: MapService, private _router: Router
  ) {

  }

  ngOnInit() {

    Marker.prototype.options.icon = this.defaultIcon;
    map = L.map('map').setView([0, 0], 2); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    this.getLocations();
  }

  getLocations() {

    var geoJsonMulti = {
      "type": "GeometryCollection",
      "geometries": [

      ]
    }

    this._mapService.getCoordinates().subscribe(
      response => {
        if (!response) {
          this._router.navigate(['/']);
        } else {
          var layer = response.cityFeatures.cities;
          console.log(layer.cities)
          layer.forEach(layer => {
            geoJsonMulti.geometries.push(layer);
          })
          console.log(geoJsonMulti)
        }
        var myStyle = {
          "color": "#ff7800",
          "weight": 5,
          "opacity": 0.65
        };
        L.geoJSON(geoJsonMulti, {
          style: myStyle
        }).addTo(map);
      },

      error => {
        let errorMessage = <any>error;
        if (errorMessage !== null) {
          let body = JSON.parse(error._body);
        }
      }
    );
  }
}

Answer 1

You have to specify the icon size and the anchor position, something like that :

  private defaultIcon: Icon = icon({
    iconUrl: 'assets/leaflet/marker-icon.png',
    shadowUrl: 'assets/leaflet/marker-shadow.png',
    iconSize: [41, 51], // => random values you have to choose right ones for your case
    iconAnchor: [20, 51] // => random values too
  });

See here : https://leafletjs.com/examples/custom-icons/