在将display: none
设置为地图容器后,我无法将包含折线标记的Google地图居中。
最初,地图显示正确,但在切换hide() / show()
后,地图居中,以便折线标记位于左下角。我也尝试过建议的解决方案来使用google.maps.event.trigger(map, "resize");
,但它没有解决它。
该片段。请注意,某些输入更改会触发initMap
:
function initMap() {
mapContainer = $("#mapContainer");
mapObject = document.getElementById('map');
if (substance === "NO2") {
mapContainer.show();
var center = new google.maps.LatLng(lat, lng);
map = new google.maps.Map(mapObject, {
center: center,
zoom: 12,
mapTypeControl: false,
streetViewControl: false
});
const point = new google.maps.LatLng(
parseFloat(lat),
parseFloat(lng)
);
var marker = new MarkerWithLabel({
position: point,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: "123",
labelAnchor: new google.maps.Point(15, 65),
labelClass: "icon",
labelInBackground: false,
icon: {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: colorBackground,
fillOpacity: 1,
strokeColor: colorBorder,
strokeWeight: 1,
scale: 2
}
});
} else {
$(mapContainer).hide();
}
}