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

实际上有一个巧妙的技巧可以解决 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 2

我认为你必须自己做。在我实现的页面中，我将鼠标移动事件附加到页面，以便我可以记录鼠标位置。然后，当发生多边形鼠标悬停事件时，我在鼠标位置附近显示一个自定义 div

希望能帮助到你