Подсказка по многоугольнику в Google Maps

Question

В моем приложении есть полигоны для разных регионов и штатов.Маркеры реализуют всплывающую подсказку, взяв атрибут title.При наведении курсора мыши и наведении курсора на полигон можно запускать события.Как создать всплывающую подсказку, похожую на всплывающую подсказку для маркера.

Edit-1: добавление кода, используемого для создания многоугольника, и присоединение обработчиков для отображения / скрытия подсказок.

function addPolygon(points) {
    var polygon = new google.maps.Polygon({
        paths: points,
        strokeColor: " #FFFFFF",
        strokeOpacity: 0.15,
        strokeWeight: 1.5,
        fillColor: "#99ff66",
        fillOpacity: 0.14
    });
    var tooltip = document.createElement('div');
    tooltip.innerHTML = "Alok";

    google.maps.event.addListener(polygon,'mouseover',function(){
        tooltip.style.visibility = 'visible';
    });
    google.maps.event.addListener(polygon,'mouseout',function(){
        tooltip.style.visibility = 'hidden';
    });
    polygon.setMap(map);
}

Answer 1

Я думаю, вам придется сделать это самостоятельно. На странице, которую я реализовал, я прикрепил событие перемещения мыши к странице, чтобы я мог записать положение мыши. Затем, когда происходит событие наведения курсора на многоугольник, я отображаю пользовательский div рядом сположение мыши

Надеюсь, это поможет

Answer 2

На самом деле есть хитрый способ обойти это (странное) ограничение в Картах Google.При наведении курсора мыши на элемент данных вы можете просто добавить всплывающую подсказку к карте <div>.Он будет добавлен в то место, где в данный момент находится указатель мыши - прямо над элементом!

map.data.addListener('mouseover', mouseOverDataItem);
map.data.addListener('mouseout', mouseOutOfDataItem));

...

function mouseOverDataItem(mouseEvent) {
  const titleText = mouseEvent.feature.getProperty('propContainingTooltipText');

  if (titleText) {
    map.getDiv().setAttribute('title', titleText);
  }
}

function mouseOutOfDataItem(mouseEvent) {
  map.getDiv().removeAttribute('title');
}

Answer 3

Вы можете попробовать следующее

//Add a listener for the click event
google.maps.event.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow;

затем, когда происходит событие щелчка, вызовите следующую функцию

function showArrays(event) {

  var contentString = 'Content here';

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}