使用 Bing 地图突出显示图钉
我们的网站从查询中选择场所，并将结果分批返回给用户，每 10 个位置在网格视图中显示详细信息，并在 bing 地图中将位置显示为用户图钉。将鼠标悬停在地图中的项目会弹出信息面板等。 为了使其更有用，我的要求如下：-
1）当用户将鼠标悬停在 gridview 列表中的项目上时，地图上相应的图钉应突出显示。 2) 当用户单击列表中的某个项目时，地图会缩放到该位置。 （我认为通过使用不同的中心和比例重绘地图相对简单）
我对第一个的想法是使用JavaScript来获取关联图钉的元素并将其替换为“突出显示”状态的新图像并替换之后就和原来的一样了。
所以我的问题是：- 这是正确的方法还是有更好的方法，是否有任何示例代码可以执行类似的操作？
非常感谢 保罗
Our website selects establishments from a query and returns the results to the user in batches of 10 locations displaying details in a gridview and locations as user pushpins in bing maps. Hovering the item in the map pops up info panel etc.
My requirements to make this more useable are as follows:-
1) When a user hovers over the item in the gridview list, the corresponding pin on the map should be highlighted.
2) When a user clicks an item in the list, the map zooms to that location. (which I think is relatively simple by redrawing map with different centre and scale)
My thoughts for the first one are to use JavaScript to get the element of the associated pushpin and replace it with a new image in the ‘highlighted’ state and to replace it with the original afterwards.
So my question is:-
Is this the right approach or is there a better one and is there any sample code doing something similar available out there?
Many thanks
Paul
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这正是我使用的方法；）我建议的唯一轻微修改是，您不必使用全新的图像替换图像，而是使用一个精灵表，其中包含突出显示和未突出显示的图像。
然后，在 onmouseover 事件处理程序中，设置图钉的 typeName 属性以分配一个 CSS 类，该类偏移图像以仅显示突出显示状态，并在 onmouseout 事件中再次重置 CSS 类，以便显示未突出显示的背景图像。这样，您的页面加载速度会更快，并且当旧图像被新图像替换时，您不必冒闪烁的风险。
typeName 属性参考： http://msdn.microsoft.com/en-us/库/gg427629.aspx
That's exactly the approach I use ;) The only slight modification I'd suggest is that, instead of replacing the image with an entirely new one, you make use of a sprite sheet that has both the highlighted and unhighlighted images on it.
Then, in the onmouseover event handler, set the typeName property of the pushpin to assign a CSS class that offsets the image to display only the highlighted state, and in the onmouseout event reset the CSS class again so that the unhighlighted background image is displayed. That way, your page will load quicker and you won't have to risk a flicker as the old image is replaced with the new.
Reference for typeName property: http://msdn.microsoft.com/en-us/library/gg427629.aspx