Question

第一篇文章，请耐心等待。

我有一个显示折线的谷歌地图。

我使用以下方法创建折线：

function createPoly(number,path, color, name) {

  var g = google.maps;
  var poly = new g.Polyline({
    path: path,
    strokeColor: color,
    strokeOpacity: 1,
    strokeWeight: 3
  });

  var label = new Label({ map: map }, poly);

  // Add mouse events to poly
  g.event.addListener(poly, "mouseover", function() {
   label.add_(name);
   poly.setOptions({strokeWeight: 6.0,strokeColor: "#0000FF",});
  });
  g.event.addListener(poly, "mouseout", function() {
   label.remove_();
   poly.setOptions({strokeWeight: 3.0,strokeColor: "#FF0000",});

  });
    g.event.addListener(poly, "click", function() {
    $('.LORDesc').empty();
    $('.LORDesc').append(name);
  });



  poly.setMap(map);
  return poly;
 }

以上代码有效，每次我想在地图上创建多边形时，我都会使用：

var MyPoly = createPoly(0,SC001, "#FF0000", "SC001 <BR>Poly 1");

也可以。

我的问题是我想在地图一侧创建链接，并允许用户将鼠标悬停在链接上并使多边形更改重量和颜色。就像用户将鼠标悬停在地图上的poly上时一样。基本上是在聚合物悬停在链接上时识别聚合物。

我希望这是有道理的。

任何帮助将不胜感激。我自己尝试了各种技术，但都失败了。

此致

强尼

Answer 1

您可以在链接上侦听mouseover和mouseout事件并触发折线对象的事件。例如：

var linkId = document.getElementById('polylink');

google.maps.event.addDomListener(linkId, 'mouseover', function(event) {
    google.maps.event.trigger(polyLine, 'mouseover', {
        stop: null,
        latLng: new google.maps.LatLng(48, 13.5),
        edge: 0,
        path: 0,
        vertex: 0
    });
});

google.maps.event.addDomListener(linkId, 'mouseout', function(event) {
    google.maps.event.trigger(polyLine, 'mouseout', {
        stop: null,
        latLng: new google.maps.LatLng(48, 13.5),
        edge: 0,
        path: 0,
        vertex: 0
    });
});

请参阅完整的example at jsbin。

如果您没有为trigger方法提供第3个参数，您将在控制台中收到消息错误：

Uncaught TypeError: Cannot read property 'vertex' of undefined

mouseover和mouseout折线事件处理程序提供google.maps.PolyMouseEvent个对象。我就像google.maps.MouseEvent对象Simulate a click in a Google Map建议的那样。

Answer 2

我只是将{}添加到trigger function的第三个参数中，此错误不再显示。

示例：google.maps.event.trigger(yourPolygon, 'mouseover', {});

用于折线的Google Maps v3 href链接

2 个答案: