Блог

Главная - Вопросы по программированию - Шаги по отображению html-элемента, близкого к точечному

Шаги по отображению html-элемента, близкого к точечному

#jquery #google-maps-api-3

#jquery #google-maps-api-3

Вопрос:

Я знаю, как размещать маркеры, и все атрибуты кажутся правильными

 var marker = new google.maps.Marker({
        position : latlng,
        map: map,
        icon: icon,
        shadow: icon_shadow,
        title : name
    });
google.maps.event.addListener(marker, 'mouseover', function() {
    jQuery('#info').fadeIn();
  });

Как я могу расположить информационное окно так, чтобы оно было близко к точечному?
Сайты, на которых я видел это в действии, похоже, использовали api v2.

Комментарии:

1. возможно, вы можете использовать jquery offset и получить верхний и левый значения и использовать их в качестве ссылки.

2. @siri, как мне получить смещение вверх / влево от маркера?

Ответ №1:

Предположим, у вас есть карта Google в качестве var map, а ваш маркер назван marker

 emptyoverlay = new google.maps.OverlayView();
emptyoverlay.draw = function() {};
emptyoverlay.setMap(map);
google.maps.event.addListener(marker,'mouseover',function(){
        //Getting the x/y positions
        var absPos  = emptyoverlay.getProjection().fromLatLngToContainerPixel(this.getPosition());
        absPos.x  = 10; // Now we have it we can shift around
        absPos.y  = -10; // Where the box shows up
        console.log(absPos);
        //jQuery magic starts here
        jQuery('#message').show().html('anything you want').css({left: absPos.x, top: absPos.y});
});
google.maps.event.addListener(marker,'mouseout',function(){
        jQuery('#message').hide();
});