用于折线的 Google Maps v3 href 链接答案

【问题标题】：Google Maps v3 href link for polyline用于折线的 Google Maps v3 href 链接
【发布时间】：2014-04-15 09:23:20
【问题描述】：

第一次发帖，请多多包涵。

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

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

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

这也很好用。

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

我希望这是有道理的。

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

问候，

强尼

【问题讨论】：

您只需要在更广泛的、可能是文档级别的范围内保存对折线对象的一些引用，并为自己留下一个“键”，以便您可以通过链接引用它们。

标签： google-maps

【解决方案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 方法提供第三个参数，您将在控制台中收到消息错误：

Uncaught TypeError: Cannot read property 'vertex' of undefined

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

【讨论】：

【解决方案2】：

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

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

【讨论】：