我见过类似的问题,但在我的角度旅程中,我没有足够的理解来正确地实现他们的答案。
我希望用户能够在地图上添加标记。我正在使用 agm-map。
我已经看到这是 google api doc中的解决方案:
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 4,
center: { lat: -25.363882, lng: 131.044922 },
}
);
map.addListener("click", (e) => {
placeMarkerAndPanTo(e.latLng, map);
});
}
function placeMarkerAndPanTo(latLng: google.maps.LatLng, map: google.maps.Map) {
new google.maps.Marker({
position: latLng,
map: map,
});
map.panTo(latLng);
}
但老实说,我不知道如何使用它——具体来说,放在哪里?
我想知道这是否与 agm-map 兼容。在 agm-map 中,我试图找到类似的东西并查看了 AgmMarker 指令。但我不确定如何理解这一切。我的地图代码目前如下所示:
<agm-map id="map" [styles]="aubergine" [zoom]="15" [maxZoom]="25" [minZoom]="12" [disableDefaultUI]="true"
style="display:block;" [latitude]="lat" [longitude]="lng">
<agm-marker-cluster
imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
<agm-marker *ngFor="let m of markers; let i = index" (markerClick)="clickedMarker(m.label, i)"
[latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable"
(dragEnd)="markerDragEnd(m, $event)" [iconUrl]="{
url: './assets/img/marker.png',
scaledSize: {
width: 20,
height: 20
}
}">
<agm-info-window>
<strong>here is some info</strong>
</agm-info-window>
</agm-marker>
</agm-marker-cluster>
</agm-map>
有人可以帮我把这些碎片放在一起吗?