всплывающая подсказка маркера 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 не работает. Любая идея?


person Santiago    schedule 19.04.2010    source источник


Ответы (7)


Это непростой вопрос. В v2 API вы можете:

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

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

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

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

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

person dave1010    schedule 28.04.2010
comment
Спасибо, наконец-то я это сделал, но кое-что, что я мог решить в двух строках кода, было чрезвычайно сложным, и мне потребовалось несколько часов. - person Santiago; 04.05.2010
comment
Это должно быть намного проще, поэтому я отправил эту ошибку: code.google.com/p/gmaps-api-issues/issues/detail?id=2342 Когда (если) исправлено, var point = marker.getProjection().fromLatLngToDivPixel(marker.getPosition()); должно работать. - person dave1010; 04.05.2010

Вот ссылка на только что созданный мной учебник о том, как создать всплывающую подсказку для 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/

person mohamed elbou    schedule 03.02.2012
comment
Добро пожаловать в Stack Overflow! Хотя теоретически это может дать ответ на вопрос, было бы предпочтительнее включить сюда основные части ответа и предоставить ссылку для справки. - person oers; 03.02.2012
comment
Тем более, что сейчас на демке 404с. :) - person Chris Rae; 22.04.2021

infowindow предназначен для решения этой проблемы. http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

person Steven Benjamin    schedule 04.11.2011
comment
Это далеко не самое практичное решение. Я имею в виду, если вы не хотите кодировать свою собственную всплывающую информацию. - person ; 24.10.2013

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

После еще нескольких поисков я нашел это решение, однако, оно именно выполняет то, что необходимо:

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()); и используйте позицию сколько душе угодно :-)

person Oliver    schedule 24.04.2013
comment
ой. поговорил в ближайшее время. в одних случаях он работает, в других - нет. немного сбит с толку вариативностью. - person elrobis; 16.10.2014
comment
@elrobis: Вы хотите сказать, что у вас проблема с кодом в моем ответе? У вас есть ошибки в консоли Javascript вашего браузера? Какое нарушение поведения? - person Oliver; 17.10.2014
comment
эй, чувак. позже он не заработал, но я уже закрыл эту страницу. Я сделал что-то глупое, например, присвоил значение .x обеим позициям x и y. И поскольку у меня была тестовая карта с центром в точке (так что x и y были почти одинаковыми), казалось, что она работает, но точки вокруг нее вели себя странно. Так что сначала казалось, что это сработало - комментарий, который я удалил, - затем я проверил другие моменты и подумал, что заговорил слишком рано. Позже, когда я сошел с ума, я понял, что повторно использовал одно из значений. :: пощечина :: smh ..: / - person elrobis; 17.10.2014
comment
Спасибо, намного лучше, чем выбранный ответ - person singe3; 31.03.2015

У меня возникли проблемы с обновлением проекции после перетаскивания карты с помощью приведенного здесь метода или создания фиктивного наложения и использования его проекции. Я нашел здесь решение, которое работает для меня на 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; 
};
person CapnChaos    schedule 09.09.2011
comment
Не совсем уверен, почему, но это решение не сработало для меня, координаты все еще были отключены. Однако я нашел такое решение: a32.me/2012/03/ - и это отлично сработало! - person Oliver; 25.04.2013

Нашел решение в другом сообщении:

var point = gmap.getProjection().fromLatLngToPoint(marker.getPosition())
person Jasper    schedule 06.10.2010
comment
при этом пиксель экрана не отображается относительно левого верхнего угла. Вместо этого он дает мировую координату. - person Nazmul; 28.04.2011

Если вы используете MarkerWithLabel для визуализации маркеров, вы можете легко использовать его свойство label для отображения дополнительных данных при наведении указателя мыши на

  google.maps.event.addListener(marker, 'mouseover', function (ev) {
    this.labelContentOld = this.labelContent
    this.set("labelContent", this.id + ' ' + this.labelContent)
  })
  google.maps.event.addListener(marker, 'mouseout', function (ev) {
    this.set("labelContent", this.labelContentOld)
  })
person angelito    schedule 25.07.2020