私はこれをどこから始めるべきか100%確信が持てません。
Google GeoMapsとgetSelection()を使用できると思いますが、Google のCode Playgroundでいくつかの試行を行った後、実際には何も得られませんでした。
私の目標
クライアント向けのサポート ページを作成していて、特定の州にカーソルを合わせると、その地域の本社がツールチップに表示される地図をページに表示したいと考えています。ただし、本部は地域専用であり、すべての州用ではないため、ミシガンにカーソルを合わせると、オハイオとインディアナも強調表示する必要があります.
誰かが私を正しい方向に向けることができますか? 私は GeoMaps で始めたばかりのアプローチを受け入れます。
これは複数のフレームワークで実行できると確信していますが、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必要なことを正確に実行するというオプションがあります。複数の領域をグループ化して、1 つにカーソルを合わせるとすべてが強調表示されるようにします。maphilight を初期化するときに、groupBy適切に設定するだけで、共通のクラスを持つすべての状態が一緒に強調表示されます。
$('.map').maphilight({groupBy:"class"});
彼が提供する米国の地図を使用する必要がないことに注意してください。これは、任意のイメージ マップで行うことができます。使用したい州座標の特定のセットがある場合は、イメージ マップを作成するだけで済みます。それらの - 共通の本部を持つ州に同じクラスを追加することを忘れないでください.