8

我在谷歌地图上做了几个多边形。现在我想向多边形添加鼠标悬停（和鼠标悬停），这样当您将鼠标悬停在多边形上时，您可以看到该区域的名称。并且当您将鼠标移出时，名称就会消失（例如当您将鼠标悬停在浏览器中的按钮上时）

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

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

4

2 回答 2

19

这是一个例子：http: //jsfiddle.net/tcfwH/304/

与浏览器工具提示不完全相同，但可以设置文本样式。我正在使用 MarkerWithLabel。每个标记都用于其多边形的名称。white-space: nowrap在 CSS 中切换多行框更改。也有 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);
  });
于 2012-05-23T15:49:31.667 回答
0

我没有在各种浏览器中测试过这个，但在 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');
        });

于 2017-05-21T13:38:26.523 回答