javascript - 突出显示美国各州、获取分配的分类并选择相关州

Question

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

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

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

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

Answer 1

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

这会在现有 HTML 图像 map 之上创建 map 突出显示行为。他有一个使用美国 map 的示例: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，所有具有公共(public)类的状态将一起突出显示:

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

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