Question

我在Google地图上制作了一些多边形。现在我想将鼠标悬停（和mouseout）添加到多边形，这样当您将鼠标悬停在多边形上时，您将看到该区域的名称。当你输入鼠标时，名字会消失（就像你将鼠标悬停在浏览器中的按钮上一样）

var map;
var infoWindow;

function initialize() {
    var myLatLng = new google.maps.LatLng(50.88111111111, 3.889444444444);
    var myOptions = {
        zoom: 12,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var poly;
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var polyCoords = [
        verwissel(3.869506,50.906449),
        verwissel(3.869654,50.905664),
        verwissel(3.869934,50.904131),
        verwissel(3.870310,50.902717),
        verwissel(3.870471,50.901559),
    ];

    poly = new google.maps.Polygon({
        paths: HerzeleCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });

    google.maps.event.addListener(Poly, "mouseover", function(showtext("polyname"));
google.maps.event.addListener(Poly, "mouseover", function(do not show text anymore);

这就是我认为的样子，但我不知道它是如何运作的。

Answer 1

以下是一个示例：http://jsfiddle.net/tcfwH/304/

与浏览器工具提示不完全相同，但可以设置文本的样式。我正在使用MarkerWithLabel。每个标记用于其多边形的名称。要切换多行框，请在CSS中更改white-space: nowrap。还有InfoBox作为工作选项，但我觉得使用它比MarkerWithLabel复杂得多。

事件侦听器根据鼠标位置移动MarkerWithLabel：

  google.maps.event.addListener(poly, "mousemove", function(event) {
    marker.setPosition(event.latLng);
    marker.setVisible(true);
  });
  google.maps.event.addListener(poly, "mouseout", function(event) {
    marker.setVisible(false);
  });

Answer 2

我没有在各种浏览器中对此进行过测试，但在Chrome中它可以解决这个问题：调用包含地图“map_canvas”的div。此外，为了使每个多边形都有自己的标题，将属性“sourceName”设置为多边形的标题。

    	perimeter.addListener('mouseover',function(){
            var map_canvas = document.getElementById("map_canvas");
            map_canvas.title = this.sourceName;
        });
    	perimeter.addListener('mouseout',function(){
            var map_canvas = document.getElementById("map_canvas");
            map_canvas.removeAttribute('title');
        });

将鼠标悬停在多边形上（显示文字）

2 个答案: