angular - 谷歌地图使用自定义标记图像显示三个位置

Question

需要谷歌地图来显示三个位置，带有自定义标记图像。

这些位置是根据我在数据库中已有的 long-lats 设置的。现在我遇到了一个问题，如果位置正好在我屏幕上显示的地图的顶部边框上，我使用的标记图像是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>

我尝试过的 COMPONENT 代码如下所示：

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);
}

}

如何解决这个问题？

标签： angularangular-google-mapsfitbounds