我不能 100% 确定从哪里开始。
我怀疑我可以使用 Google GeoMaps 和 getSelection()，但在使用 Google 的 Code Playground 进行了一些试验后，我还没有真正做到。
我的目标
我正在为客户构建一个支持页面，他们希望页面上有一张地图，当您将鼠标悬停在某些州上时，它会在工具提示中显示该地区的总部。不过，总部仅针对地区，而不是针对每个州，因此当他们将鼠标悬停在密歇根州上空时，他们希望俄亥俄州和印第安纳州也能突出显示。
谁能指出我正确的方向？我对刚开始使用 GeoMaps 的任何方法持开放态度。
【问题讨论】：
标签： javascript html css geomap
我确信这可以在多个框架中完成，但一种选择是 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"});
请注意，您不需要使用他提供的美国地图 - 您可以使用任何图像地图来执行此操作，如果您想要使用一组特定的州坐标，您只需制作一个图像映射出它们 - 只需记住将相同的类添加到具有共同总部的那些州。
【讨论】：