谷歌地图中多边形的工具提示

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);
}

- Alok Swain

---

可能是[Google地图v3折线工具提示]的重复问题。 - Vincent Sels

不是重复问题，这是旧问题。 - Gil Epshtain

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');
}

- Vincent Sels

Answer 2

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

希望这有所帮助。

- Argiropoulos Stavros

---

我确实尝试了这样的方法。 我的做法如下：

1. 我有mouseover和mouseout事件。
2. 我创建了一个div，在mouseover事件中显示它，在mouseout事件中隐藏它。

但是这对我没有起作用。 - Alok Swain

也许如果您发布您的代码，我们就可以理解错误来自哪里。 - Argiropoulos Stavros

尝试将一个 div 放置在 HTML 中，而不是动态创建它。同时尝试使用 CSS ----> display:none。 - Argiropoulos Stavros

按照步骤进行了操作，奇怪的是我甚至没有收到JS错误。在页面上保留了一个静态div，并使该div在多边形鼠标悬停时显示，但未看到任何更改。 - Alok Swain

我建议尝试获取一个单独的小项目来测试div的隐藏和显示，以确保您按正确的方式完成所有操作，然后再尝试将经过测试的代码附加到您的主项目中。 - Argiropoulos Stavros

Answer 3

这段代码对我很有用： googleShape - 是你的多边形、圆形或矩形。 titleText - 你需要在形状悬停时发布的消息。

google.maps.event.addListener(googleshape, 'mouseover', function() {
    this.map.getDiv().setAttribute('title', "`titleText`");
});
google.maps.event.addListener(googleshape, 'mouseout', function() {
    this.map.getDiv().removeAttribute('title');
});

- Akshay s m

Answer 4

你可以尝试以下方法。

//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);
}

- kcode

Answer 5

一个不错的解决方案是使用谷歌内置的InfoWindow作为工具提示/弹出容器。然后监听鼠标悬停和移开事件mouseover和mouseout，来显示/隐藏工具提示。

请注意，使用InfoWindow时，您还可以将HTML标记放置在工具提示的内容中，而不仅仅是普通文本。

const mapHandler: google.maps.Map = ... // your code here
const polygon: google.maps.Polygon = ... // your colde here

const popUp = new google.maps.InfoWindow({
  content: "<span style='color:red'> SOME MESSAGE </span>" // red message
});

polygon.addListener("mouseover", (event) => {
  popUp.setPosition(event.latLng);
  popUp.open(mapHandler);
});

polygon.addListener("mouseout", (event) => {
  popUp.close()
});

- Gil Epshtain