0

我不是 100% 确定从哪里开始。

我怀疑我可以使用Google GeoMaps和getSelection()但在使用 Google 的Code Playground进行了一些试验之后，我还没有真正得到任何地方。

我的目标
是为客户建立一个支持页面，他们希望页面上有一张地图，当您将鼠标悬停在某些州上时，它会在工具提示中显示该地区的总部。不过，总部仅适用于地区，而不适用于每个州，因此当他们将鼠标悬停在密歇根上空时，他们希望俄亥俄州和印第安纳州也能突出显示。

谁能指出我正确的方向？我对刚开始使用 GeoMaps 的任何方法持开放态度。

4

1 回答 1

2

我确信这可以在多个框架中完成，但一种选择是 David Lynch 的基于 jQuery 的 maphilight：http ://davidlynch.org/projects/maphilight/docs/ 。

这会在现有 HTML 图像地图之上创建地图突出显示行为。他有一个使用美国地图的例子：http: //davidlynch.org/projects/maphilight/docs/demo_usa.html

假设您有几个区域要一起突出显示（这只是一个示例，因此我简化了坐标）：

<area href="#" title="MI" class="hq4" shape="poly" coords="562,99, 564,97, 566,96, 571,92, 573,91, 574,92, 569,97, 565,99, 563,100, 562,99">
<area href="#" title="OH" class="hq4" shape="poly" coords="708,208, 701,212, 697,214, 694,217, 690,221, 687,222, 684,222, 710,226, 708,208">
<area href="#" title="IN" class="hq4" shape="poly" coords="598,311, 597,307, 598,303, 600,300, 602,296, 604,292, 604,287, 602,284, 598,311">

请注意，在title指定州缩写的属性之后，我放置了一个class. maphilight 有一个名为的选项groupBy，它完全符合您的需要 - 它将多个区域分组，因此如果您将鼠标悬停在一个区域上，它们都会突出显示。初始化 maphilight 时，只需groupBy适当设置，所有具有公共类的状态都会一起突出显示：

$('.map').maphilight({groupBy:"class"});

请注意，您不需要使用他提供的美国地图 - 您可以使用任何图像地图来执行此操作，如果您想要使用一组特定的州坐标，您可以制作一个图像地图其中-只要记住将相同的班级添加到具有共同总部的州即可。

于 2013-03-14T20:05:10.533 回答