Google地图中的多边形工具提示

Question

我的应用程序中有各种区域和状态的多边形。标记通过获取title属性来实现工具提示。在鼠标悬停和鼠标悬停时，可以触发多边形事件。如何创建看起来像是为标记实现的工具提示的工具提示。

编辑-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

实际上有一个巧妙的方法来解决谷歌地图中的这个（奇怪的）限制。将鼠标移到数据项上时，只需将工具提示添加到地图的<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);
}