Highlight Google maps polyline when mouseover a placemark link
我试图在网上找到它,但是运气不佳。 Stackoverflow似乎也没有类似的问题解决方案。这是我发现的最接近的比较:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/2121de2422cf5053?pli=1
但是此人的实时页面看起来并不像他们走的那么远(他们的地图只有他们2010年1月在工作)...但是与我想做的想法相同。我也不知道如何实现给定的解决方案,因为我将有数百条折线,并且不想为每个折线创建一个全局变量...
我想做的是以某种方式"聚类"一个具有一组从该标记开始/结束的折线的地标。然后,我将在侧边栏/菜单外地图中具有指向该地标的链接,并且我希望当用户将鼠标悬停/鼠标悬停于该地标的链接时,与该地标关联的折线会更改其不透明度(即突出显示)。我认为我的问题是:
我有种感觉,然后我的问题就会变成"如何在创建折线时知道链接/地标的处理程序?"如果我尝试这种方法...
我目前正在使用Rails和gmaps4rails插件进行尝试,但是可以接受其他精美的建议/解决方案。
感谢您的帮助!
========================================
这是我到目前为止尝试过的代码,遵循以下暂停呼吸的建议(我不是Rails,javascript,Coffeescript或Maps专家...):
在gmaps4rails.base.js中的createSidebar函数中,添加了第二行:
1 2 | aSel.onclick = @sidebar_element_handler(currentMap, marker_container.serviceObject, 'click') aSel.onmouseover = @sidebar_highlight_paths(currentMap, marker_container.serviceObject) |
然后定义:
1 2 3 4 5 6 7 8 9 10 | 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:数组元素匹配另一个数组
现在,每当我将鼠标悬停在链接上时,我的Chrome javascript控制台中的透明度都不会改变,并且此错误:
未捕获的TypeError:对象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
好吧,想通了-感谢您进行呼吸暂停技巧!为了将来参考(如果这确实对任何人有帮助),我基本上在gmaps4rails.base.js.coffee中将这两行(onmouseover和onmouseout)添加到createSidebar:
1 2 3 4 5 | 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) |
然后:
1 2 3 4 5 6 7 8 9 10 11 12 | 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} |