Question

我不是百分之百确定从哪里开始。

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

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

有人能指出我正确的方向吗？我对我刚开始使用GeoMaps的方法持开放态度。

Answer 1

我确信这可以在多个框架中完成，但是一个选项是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"});

请注意，您不需要使用他提供的美国地图 - 您可以使用任何图像地图执行此操作，如果您有一组特定的状态坐标，则可以使用它们中的图像映射 - 只需记住将相同的类添加到具有共同总部的那些状态。

突出显示美国各州，获取指定的分类，以及选择相关州

1 个答案: