Google карты для отображения трех мест с пользовательским маркером изображения

Нужна карта Google, чтобы отобразить три местоположения, с пользовательским маркером изображения.

Эти местоположения установлены на основе длинных латов, которые у меня уже есть в базе данных. Теперь у меня возникла проблема: когда местоположение находится точно на верхней границе карты, отображаемой на моем экране, используемое мной изображение маркера составляет 15px * 15px, поэтому оно отображает только половину или в некоторых случаях отображает только нижняя часть маркера (может сложиться впечатление, что там нет маркера).

HTML-код, который я попробовал, показан ниже:

<div id=mapDiv>
<agm-map   #storeMap 
[latitude]="lat"
[longitude]="lng"
[scrollwheel]="true" 
[zoom]="zoom"
[zoomControl]="false"
[disableDefaultUI]="true"
[mapDraggable]="true"
[styles]="mapstyles"
[mapTypeControl]="false"
[disableDoubleClickZoom]="true"
[streetViewControl]="false"
[panControl]="true"
[clickableIcons]="false"
[scaleControl]="false"  
(mapReady)="storeMapReady($event)">

<agm-marker 
  *ngFor="let m of orderMarkers; let i = index"
  (markerClick)="clickedMarker(m.ServiceCenterId)"
  [latitude]="m.Latitude"
  [longitude]="m.Longitude"
  [iconUrl]="m.icon">
</agm-marker>

</agm-map>

Код КОМПОНЕНТА, который я попробовал, показан ниже:

setMarkers() {
var bounds = (this.orderMarkers.length > 0) ? this.createBoundsForMarkers(this.orderMarkers) : null;
this.zoom = (bounds) ? this.getBoundsZoomLevel(bounds, this.mapDim) : 0;
this.storeMap.setZoom(this.zoom);

}

/**
* create Markers for Bound 
@param markers 
/
createBoundsForMarkers(markers) {
this.$mapDiv = $('#mapDiv');
this.mapDim = {
  height: this.$mapDiv.height(),
  width: this.$mapDiv.width()
}
this.bounds = new google.maps.LatLngBounds();
for (let store of markers) {
  this.bounds.extend(new google.maps.LatLng(store.Latitude, 
store.Longitude));
}
return this.bounds;
}

getBoundsZoomLevel(bounds, mapDim) {
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();

var latFraction = (this.latRad(ne.lat()) - this.latRad(sw.lat())) / Math.PI;

var lngDiff = ne.lng() - sw.lng();
var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;

var latZoom = this.zoomLocation(mapDim.height, this.WORLD_DIM.height, 
latFraction);
var lngZoom = this.zoomLocation(mapDim.width, this.WORLD_DIM.width, 
lngFraction);
let boundZoom = Math.min(latZoom, lngZoom, this.ZOOM_MAX);
boundZoom--;
return boundZoom;
}

latRad(lat) {
var sin = Math.sin(lat * Math.PI / 180);
var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
}

zoomLocation(mapPx, worldPx, fraction) {
return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
}

}

Как решить это?

0 ответов

Другие вопросы по тегам