33

ユーザーがマップ内のさまざまな州をクリックして、その州に固有の情報を取得できるインタラクティブマップを作成しようとしています。

例：

これまでのところ、機能が制限されているソリューションしか見つかりませんでした。私は実際にSVGファイルを使用してこれを検索しただけですが、可能であれば他のファイルタイプを受け入れるでしょう。

これを行うための完全に機能する方法（jQueryプラグイン、PHPスクリプト、ベクター画像）または手動で行う方法のチュートリアルを知っている人がいる場合は、共有してください。

4

11 に答える 11

44

画像マップを装飾するためのjQueryプラグイン（ハイライト、選択領域、ツールチップ）：

http://www.outsharked.com/imagemapster/

開示：私はそれを書きました。

于 2012-06-29T19:49:08.893 に答える
21

シンプルなイメージマップが必要なようですが、必要以上に複雑にしないことをお勧めします。これは、svgを使用してイメージマップを改善する方法に関する記事です。svg自体でクリック可能な領域を作成するのは非常に簡単です。クリック可能にしたい形状の周りにいくつかの<a>要素を追加するだけです。

より高度なものが必要な場合のいくつかのオプション：

于 2012-06-28T08:55:55.267 に答える
7

私の答えを2つの部分に分けたほうがいいと思います。

A-すべてを最初から作成します（SVG、JavaScript、およびHTML5を使用）。

  1. 新しいHTML5ページを作成します
  2. 新しいSVGファイルを作成します。クリック可能な各領域（州）は、SVGファイル内の個別のSVGポリゴンである必要があります（SVGファイルの作成にはAdobe Illustratorを使用していますが、Inkscapeなどの代替ソフトウェア製品も多数あります） 。
  3. マウスオーバーとクリックイベントをポリゴンに1つずつ追加します 
    <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" 
    onmouseover="mouseOverHandler(evt)"
    onclick="clickHandler(evt)" />
  4. JavaScriptコードの各イベントのハンドラーを追加し、目的のコードをハンドラーに追加します 
    function mouseOverHandler(evt) {};
function clickHandler(evt) {};
  5. SVGファイルをHTMLページに追加します（私はインラインSVGを好みますが、リンクされたSVGファイルも使用できます）
  6. サーバーにファイルをアップロードします

B- FLDraw Interactive Image Creatorなどのソフトウェアを使用します（地図画像があり、それをインタラクティブにしたい場合のみ）：

  1. 空のプロジェクトを作成し、新しいプロジェクトを作成するときにベースイメージとしてマップイメージを選択します
  2. 各州のポリゴン要素を（[形状]メニューから）追加します
  3. ポリゴンごとにダブルクリックして[プロパティ]ウィンドウを開き、マウスオーバーしてクリックするイベントタイプを選択します。また、形状の不透明度を0に変更して非表示にします。
  4. プロジェクトを保存してHTML5に公開すると、FLDrawは、サーバーにアップロードできるプロジェクトに必要なすべてのファイルを含む新しいフォルダーを作成します。

オプション（A）は、プログラマーであるか、必要なコードとSVGファイルを作成する人がいる場合に非常に適しています。オプション（B）は、誰かを雇ったり、からすべてを作成するために自分の時間を費やしたくない場合に適しています。スクラッチ

他にもいくつかのオプションがあります。たとえば、SVGの代わりにHTML5 Canvasを使用しますが、HTML5 Canvasを使用してズーム可能なマップを作成するのは簡単ではありません。おそらく、私が知らない他の方法もあります。

于 2016-12-02T10:40:14.183 に答える
3

誰かがそれを検索する場合に備えて-私はいくつかのサイトでそれを使用しましたが、常にカスタマイズとRDの可能性は私が必要としたものに完全に適合していました。シンプルで無料で使用できます。

クリック可能なCSSマップ

サイト上のスクリプトに関する注意事項：Drupal 7でマップ（グラフィックメニューとして機能）を操作する際に厄介な問題が発生しました。他の多くのスクリプトが使用されていた場所で、それらを処理した後、マップでスタックしました。 --jquery.cssmap.js、CSS（両方ともローカル）、およびスクリプトは適切な場所にありますが、それでも機能しませんでした。Firebugがエラーを表示し、突然eureka-単純な見落としでした。スクリプトコードを例のように残しましたが、競合が発生しました。フロント関数「$」を「jQuery」（または他のハンドラー）に変更するだけで、完璧に機能します。：]

これが私が述べていることです（もちろん、代わりに前に置くことができます）：

<script type="text/javascript">
      jQuery(function($){
        $('#map-country').cssMap({'size' : 810});
       });
    </script>

于 2014-07-15T17:50:38.027 に答える
1

SVGを使用してSVGtoScriptに移動し ます。デフォルトの出力は、イベントを追加するSVGコードのマップですが、簡単に識別でき、必要に応じて変更できます。

于 2012-06-27T23:59:58.893 に答える
1

私はしばらくの間、州の地図にmakeaclickablemapを使用してきましたが、それは本当にぴったりであることがわかりました。

于 2013-11-10T08:29:46.017 に答える
1

私は同じ要件を持っていました、そして最終的にこのマップコンバーターは私のために働きました。これは、あらゆるマップ生成に最適なプラグインです。

于 2013-12-27T17:24:08.317 に答える
1

これが私が画像マッ​​プを強化するために書いた別の画像マッププラグインです：https ：//github.com/gestixi/pictarea

すべての領域を簡単に強調表示し、ゾーンの状態に応じて、通常、ホバー、アクティブ、無効などのさまざまなスタイルを指定できます。

同時に選択できるゾーンの数を指定することもできます。

于 2016-05-20T10:11:56.487 に答える
0

次のコードが役立つ場合があります。

$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
    alert($(this).attr("id"));
});

ソース

于 2015-07-29T15:05:13.950 に答える
-1

これにはかなりの数のオプションがあります。

1-必要なマップのSVGファイルが見つかった場合は、RaphaelJSやSnapSVGなどを使用して、州/地域のクリックリスナーを追加できます。このソリューションは最もカスタマイズ可能です...

2-clickablemapbuilder（無料）やmakeaclickablemap（私も無料だと思います）などの専用ツールを使用できます。

[免責事項]clickablemapbuilder.comの作者です:)

于 2015-10-06T16:10:28.573 に答える
-2 

<script type="text/javascript">
      jQuery(function($){
        $('#map-country').cssMap({'size' : 810});
       });
    </script>

強いテキスト

于 2016-05-10T05:24:39.547 に答える