Тени на Google Maps visualRefresh
В документах Google Maps ( https://developers.google.com/maps/documentation/javascript/reference) указано:
"Тени не отображаются, если для google.maps.visualRefresh установлено значение true".
Можно ли перезаписать это и получить тени при использовании visualRefresh?
Я также нашел документы, подтверждающие это ( https://devsite.googleplex.com/maps/documentation/javascript/basics):
Все тени были удалены в визуальном обновлении. Любые тени, указанные программно, будут игнорироваться.
Мне все еще кажется странным, что они не позволят вам как-то перезаписать это, чтобы разрешить тени и визуальное обновление, если это так.
2 ответа
Вы можете создать свой значок маркера с тенью.
Или создайте собственное наложение для ваших маркеров, которое включает тень (т.е. не объект google.maps.Marker).
подтверждение концепции, от моего ответа на связанный вопрос: Маркерные тени в Google Maps v3
Теперь это больше работы, но все еще возможно, так как это больше не поведение по умолчанию.
Почему бы не создать дополнительный маркер с более низким z-индексом? Это меньше работы, чем создание пользовательского наложения, и, возможно, более правильный способ сделать это. (если вы создадите один значок маркера с тенью как часть изображения значка, как предложено, тень также будет активна, и это нежелательно)
createMarkerShadow = function(map, data) {
var latLng = new google.maps.LatLng(data.latitude, data.longitude);
var markerShadow = new google.maps.Marker({
clickable: false,
position: latLng,
map: map,
icon:{
url: '/frontend/img/icons/google-map-marker-shadow.svg',
//The size image file.
size: new google.maps.Size(225, 120),
//The point on the image to measure the anchor from. 0, 0 is the top left.
origin: new google.maps.Point(0, 0),
//The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
anchor: new google.maps.Point(115, 82)
},
zIndex: (Math.round(latLng.lat()*-100000)<<5)-1
});
return markerShadow;
};
setMarkerShadows = function (map, locations, bound) {
for (var i = 0; i < locations.length; i++) {
var data = locations[i];
var markerShadow = createMarkerShadow(map, data);
bound.extend(markerShadow.getPosition());
}
};
bound = new google.maps.LatLngBounds();