Google Maps V3 Marker Mouse Tooltip
-
28-09-2019 - |
Вопрос
Я хочу поставить всплывающую подсказку сделала себя с Divs, когда мышь на самом маркере, но я не знаю, как получить положение экрана, чтобы положить Div на правильное положение, вот мой код:
google.maps.event.addListener(marker, "mouseover", function() {
divover.css("left", marker.get("left"));
divover.css("top", marker.get("top"));
divover.css("display", "block");
});
google.maps.event.addListener(marker, "mouseout", function() {
divover.css("display", "none");
});
Очевидно, что метод получения не удается. Есть идеи?
Решение
Это сложный. В V2 API вы можете сделать:
map.fromLatLngToContainerPixel(marker.getLatLng(), zoomLevel);
В V3 метод отLatLngtocontainerPixel был перемещен на объект MapCanVasProject. Чтобы получить объект MapCanVasProjection, вам нужно позвонить GetProject на объекте OverlayView. Похоже, что класс маркера продлен от OverlayView, но, к сожалению, у него нет метода GetProjection. Я понятия не имею, почему - может стоить подавать ошибку.
То, как я делал это, создавая свой собственный пользовательский класс маркера, основанный на OverlayView, поэтому он все еще имеет метод GetProjection:
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
Вы можете прочитать учебник Google на Пользовательские накладки или скопировать их пример чтобы начать.
Другие советы
Вот ссылка на учебное пособие, которое я только что создал о том, как создать всплывающую подсказку для Google Maps API V3: http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript-api-v3/Чтобы увидеть это в действии, иди сюда http://medelbou.com/demos/google-maps-tooltip/
infowindow
предназначен для решения этой проблемы.http://code.google.com/apis/maps/documentation/javascript/overlays.html#infowindows.html#infowindows.
Как-то, ни один другой ответ не работал для меня, или я не хотел их реализовать (например, создание собственного собственного класса маркера).
После некоторых поисков я нашел Это решение, Хотя, что делает точно Что нужно:
function latlngToPoint(map, latLng) {
var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
var scale = Math.pow(2, map.getZoom());
var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
var point = new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
return point;
}
Тогда просто позвоните var position = latlngToPoint(map, marker.getPosition());
И используйте позицию до контента вашего сердца :-)
У меня возникли проблемы с получением проекции для обновления после перетаскивания карты с использованием метода здесь или создавая фиктивное наложение и использование его проекции. Я нашел решение, которое работает 100% для меня здесь: http://qfox.nl/notes/116.
/**
* @param {google.maps.Map} map
* @param {google.maps.LatLng} latlng
* @param {int} z
* @return {google.maps.Point}
*/
var latlngToPoint = function(map, latlng, z){
var normalizedPoint = map.getProjection().fromLatLngToPoint(latlng); // returns x,y normalized to 0~255
var scale = Math.pow(2, z);
var pixelCoordinate = new google.maps.Point(normalizedPoint.x * scale, normalizedPoint.y * scale);
return pixelCoordinate;
};
/**
* @param {google.maps.Map} map
* @param {google.maps.Point} point
* @param {int} z
* @return {google.maps.LatLng}
*/
var pointToLatlng = function(map, point, z){
var scale = Math.pow(2, z);
var normalizedPoint = new google.maps.Point(point.x / scale, point.y / scale);
var latlng = map.getProjection().fromPointToLatLng(normalizedPoint);
return latlng;
};
Нашел решение в Еще один пост:
var point = gmap.getProjection().fromLatLngToPoint(marker.getPosition())