Я использую буклет в приложении Angular, и я показываю некоторые маркеры, расположенные в координатах, которые я получаю из серверной части.
С кодом в конце поста маркеры отображаются, ноони не сохраняют положение при различном уровне масштабирования, как вы можете видеть на следующих изображениях.
Маркеры должны быть над красными точками, но они находятся в другом месте, и кажется, что они не сохраняют положение, когда я увеличиваю или уменьшаю масштаб.Похоже, что точки находятся на другом слое с другой системой ссылок.
Я пытался сохранить mMarker.prototype.options.icon в переменной и использовать addTo (map), но он выбрасываетошибка с надписью "addTo" не является функцией.
Что я могу сделать?Спасибо
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);
}
}
);
}
}