Question

我试图在网上找到这个，但没有太多运气。 Stackoverflow似乎也没有类似的问题解决方案。这是我发现的最接近的比较：

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

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

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

如何引用已创建的折线？我怎么弄清楚它的手柄？
我可以通过“通过”我的标记来改变折线的属性吗？（即aSel.onmouseover（“触摸此对象的所有折线都有不透明度= 1”））
有关如何修改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

交叉函数基于响应： Coffeescript: Array element matches another array

现在，只要我将鼠标移到链接上，Chrome浏览器javascript控制台中的不透明度和此错误都没有变化：

Uncaught TypeError：Object 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，所以我很困惑！此外，我现在忽略资源解释错误，因为它似乎更常见......

感谢您的提示，感谢，并感谢能够揭示我的新错误的其他任何人......

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

好的，想出来了 - 感谢apneadiving你的提示！为了将来参考（如果这实际上有助于任何人），我基本上将这两行（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

好的，想出来了 - 感谢apneadiving你的提示！为了将来参考（如果这实际上有助于任何人），我基本上将这两行（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}

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

1 个答案: