将鼠标悬停在地标链接上时突出显示 Google 地图折线

Question

我曾尝试在网上找到此内容，但运气不佳。 Stackoverflow 似乎也没有类似的问题解决方案。这是我找到的最接近的比较：

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/2121de2422cf5053?pli=1

但是这个人的实时页面看起来并没有走得很远（他们只有 2010 年 1 月在他们的地图上工作）......但与我想要做的想法相同。我也不知道如何实现给定的解决方案，因为我将有数百条折线并且不想为每条折线创建一个全局变量...

我想做的是以某种方式“聚集”一个地标，其中包含一组从该标记开始/结束的折线。然后，我将在侧边栏/菜单外的地图中有一个指向该地标的链接，我希望当用户将鼠标悬停/鼠标悬停在该地标的链接上时，与地标关联的折线会改变其不透明度（即突出显示）。我想我的问题是：

1. 如何引用已创建的折线？如何找出它的句柄？
2. 我能否利用折线“穿过”我的标记的事实以某种方式更改折线的属性？ （即 aSel.onmouseover("所有接触此对象的折线的不透明度 = 1")）
3. 关于如何修改 gmaps4rails.base.js 文件的“创建折线”功能来做到这一点有什么建议吗？ https://github.com/apneadiving/Google-Maps-for-Rails/blob/master/app/assets/javascripts/gmaps4rails/gmaps4rails.base.js.coffee 我有一种感觉，然后我的问题将变成“创建折线时我如何知道链接/地标的处理程序？”如果我尝试这种方法...

我目前正在使用 Rails 和 gmaps4rails 插件来尝试这个，但我愿意接受其他优雅的建议/解决方案。

感谢您的帮助！

============================================

这是我迄今为止尝试过的代码，遵循以下 apneadiving 的建议（我不是 Rails、javascript、Coffeescript 或 Maps 专家......）：

在gmaps4rails.base.js的createSidebar函数中，添加了第二行：

aSel.onclick = @sidebar_element_handler(currentMap, marker_container.serviceObject, 'click')
aSel.onmouseover = @sidebar_highlight_paths(currentMap, marker_container.serviceObject)

然后定义：

sidebar_highlight_paths : (currentMap, marker) ->
  return () ->
    for polyline in Gmaps.map.polylines
      points = polyline.serviceObject.latLngs.getArray()[0].getArray()
      if (@sidebar_intersect(points, marker.position))
        @polyline.setOptions({strokeOpacity: 1.0})

sidebar_intersect : (a, b) ->
  [a, b] = [b, a] if a.length > b.length
  value for value in a when value in b

intersect 函数基于此处的响应： Coffeescript: Array element matches another array

现在，每当我将鼠标悬停在链接上时，我的 Chrome javascript 控制台中的不透明度和此错误都没有变化：

未捕获的类型错误：对象 javascript:void(0);没有方法'sidebar_intersect' Gmaps4Rails.Gmaps4Rails.sidebar_highlight_pathsgmaps4rails.base.js:434

资源解释为图像，但使用 MIME 类型 text/html 传输：“http://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=src:apiv3,ts:1336420051554”。

第 434 行（对于上面的无方法错误）是：

if @map_options.auto_adjust
  #from markers
  @extendBoundsWithMarkers()
->line 432<-
  #from polylines:
  for polyline in @polylines ->line 434<-
    polyline_points = polyline.serviceObject.latLngs.getArray()[0].getArray()
    for point in polyline_points
      @boundsObject.extend point

这与我的新功能sidebar_intersect无关，所以我很困惑！另外，我现在忽略 Resource Interpreted 错误，因为它似乎更常见......

感谢您的提示，再次潜水，我感谢其他任何可以阐明我的新错误的人...

==============================

好的，想通了——感谢您的提示！为了将来参考（如果这真的对任何人有帮助），我基本上将这两行（onmouseover 和 onmouseout）添加到 gmaps4rails.base.js.coffee 中的 createSidebar：

aSel.onclick = @sidebar_element_handler(currentMap, marker_container.serviceObject, 'click')
aSel.onmouseover = @sidebar_highlight_paths(currentMap, marker_container.serviceObject)
aSel.onmouseout = @sidebar_reset_paths(currentMap, marker_container.serviceObject)
li.appendChild(aSel)
ul.appendChild(li)

然后：

sidebar_highlight_paths : (currentMap, marker) ->
return () ->
  for polyline in Gmaps.map.polylines
     b = polyline.serviceObject.latLngs.getArray()[0].getArray()
     for latlng in b
       if (marker.position.equals(latlng))
         polyline.serviceObject.setOptions({strokeOpacity: 1})

sidebar_reset_paths : (currentMap, marker) ->
return () ->
  for polyline in Gmaps.map.polylines
    polyline.serviceObject.setOptions({strokeOpacity: 0.1}

Answer 1

好的，想通了——感谢您的提示！为了将来参考（如果这真的对任何人有帮助），我基本上将这两行（onmouseover 和 onmouseout）添加到 gmaps4rails.base.js.coffee 中的 createSidebar：

aSel.onclick = @sidebar_element_handler(currentMap,marker_container.serviceObject, 'click')
aSel.onmouseover = @sidebar_highlight_paths(currentMap,marker_container.serviceObject)
aSel.onmouseout = @sidebar_reset_paths(currentMap,marker_container.serviceObject)
li.appendChild(aSel)
ul.appendChild(li)

然后：

sidebar_highlight_paths : (currentMap, marker) ->
return () ->
  for polyline in Gmaps.map.polylines
     b = polyline.serviceObject.latLngs.getArray()[0].getArray()
     for latlng in b
       if (marker.position.equals(latlng))
         polyline.serviceObject.setOptions({strokeOpacity: 1})

sidebar_reset_paths : (currentMap, marker) ->
return () ->
  for polyline in Gmaps.map.polylines
    polyline.serviceObject.setOptions({strokeOpacity: 0.1}