Подсказка google maps v3

Я хочу поместить всплывающую подсказку, сделав себя с div, когда мышь над маркером, но я не знаю, как получить положение экрана, чтобы поместить 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");
});

Очевидно, что метод get не работает. Любая идея?

Ответы

Ответ 1

Это сложно. В v2 API вы можете сделать:

map.fromLatLngToContainerPixel(marker.getLatLng(), zoomLevel);

В v3 метод fromLatLngToContainerPixel перенесен в объект MapCanvasProjection. Чтобы получить объект MapCanvasProjection, вам нужно вызвать getProjection для объекта OverlayView. Похоже, класс Marker расширен с OverlayView, но, к сожалению, он не имеет метода getProjection. Я понятия не имею, почему - возможно, стоит записать ошибку.

Я сделал это, создав собственный собственный класс маркеров на основе OverlayView, поэтому у него все еще есть метод getProjection:

var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);

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

Ответ 4

Так или иначе, ни один из других ответов не работал у меня, или я не хотел их реализовывать (например, создание собственного класса Marker).

После некоторого поиска я нашел это решение, однако, что точно, что нужно:

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()); и используйте положение для вашего сердечного содержимого: -)

Ответ 5

У меня возникли проблемы с обновлением проекции после перетаскивания карты с использованием метода здесь или создания манекена overlayview и использования его проекции. Я нашел решение, которое для меня работает на 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; 
};