google-maps - グーグルマップ：ポリゴンをクリックしてインフォウィンドウを開く方法は？

Question

簡単な質問がありますが、GoogleMapsAPIのドキュメントで答えが見つかりません...

APIによって描画された13個のポリゴンを含むマップがあります。これらのポリゴンの1つの例を次に示します。

 var zone_up_montblanc = new GPolygon([
        new GLatLng(46.21270329318585, 6.134903900311617), 
        new GLatLng(46.20538443787925, 6.136844716370282), 
        new GLatLng(46.20525043957647, 6.141375978638086), 
        new GLatLng(46.20698751554006, 6.148050266912262), 
        new GLatLng(46.21110286985207, 6.153203229026629), 
        new GLatLng(46.21730757985668, 6.151718301267355), 
        new GLatLng(46.22092122197341, 6.153676364285801), 
        new GLatLng(46.22615123408969, 6.149844858907489), 
        new GLatLng(46.22851200024137, 6.149876939987202), 
        new GLatLng(46.22945159836955, 6.142758190170017), 
        new GLatLng(46.21735908463437, 6.141457132705133), 
        new GLatLng(46.21753573755057, 6.138058122426195), 
        new GLatLng(46.21270329318585, 6.134903900311617)
        ], "#6b1f43", 2, 0.9, "#92c87f", 0.5);

それから：

  map.addOverlay(zone_up_montblanc);

ポリゴンがマップに表示されますが、問題ありません。しかし、私が今しなければならないことは、各ポリゴンをクリックして「InfoWindow」を開くことです（ポリゴンごとに異なるコンテンツを使用）。

誰かがアイデアや例を持っていましたか？

あなたの助けをどうもありがとう！

score 6 · Accepted Answer

個々の情報ウィンドウを持つ複数のポリゴンを持つための非常に優れたソリューションを見つけました。

これが私のコードです：

<script type="text/javascript"
        src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" charset="utf-8">

    var map;
    var cities = {
        "Hamburg":[
            [53.60, 9.75],
            [53.73, 10.19],
            [53.48, 10.22]
        ],
        "Hannover":[
            [52.34, 9.61],
            [52.28, 9.81],
            [52.43, 9.85]
        ],
        "Bremen":[
            [53.22, 8.49],
            [53.12, 8.92],
            [53.02, 8.72]
        ]
    };
    var opened_info = new google.maps.InfoWindow();

    function init() {
        var mapOptions = {
            zoom:8,
            center:new google.maps.LatLng(53, 9.2),
            mapTypeId:google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
                mapOptions);
        for (var c in cities) {
            var coods = cities[c]
            var polyPath = [];
            for (j = 0; j < coods.length; j++) {
                polyPath.push(new google.maps.LatLng(coods[j][0], coods[j][1]));
            }
            var shape = new google.maps.Polygon({
                paths:polyPath,
                fillColor:"#00FF00",
                fillOpacity:0.6,
            });
            shape.infowindow = new google.maps.InfoWindow(
                    {
                        content:"<b>" + c + "</b>" + "</br>",
                    });
            shape.infowindow.name = c;
            shape.setMap(map);
            google.maps.event.addListener(shape, 'click', showInfo);
        }

    }
    ;

    function showInfo(event) {
        opened_info.close();
        if (opened_info.name != this.infowindow.name) {
            this.infowindow.setPosition(event.latLng);
            this.infowindow.open(map);
            opened_info = this.infowindow;
        }
    }

</script>

また、同じポリゴンをもう一度クリックしてインフォウィンドウを閉じる機能も提供します。

score 2 · Accepted Answer

こんにちは、filip-fkuに感謝します！

あなたのコメントのおかげで、私は最終的にこれを行う方法を見つけます！:-)だから、誰かが「これを行う方法」を検索した場合、ここにコードスニペットがあります：

GEvent.addListener(zone_up_champagne, "click", function(overlay,latlng) {
    map.openInfoWindowHtml(overlay, '<strong>Your html things :</strong><br />etc...');
});

これがお役に立てば幸いです。

もう一度フィリップありがとう！:)

score 1 · Accepted Answer

グローバル情報ウィンドウは必要ありません。イベントハンドラーが機能する側で情報ウィンドウを初期化します。このプロトタイプを使用して、ポイントがポリゴンの配列内のポリゴンのインスタンスに含まれているかどうかを確認します。

http://hammerspace.co.uk/projects/maps/

http://www.ikeepuposted.com/area_served.aspxに機能例があります

score 0 · Accepted Answer

しばらくAPIを使用しておらず、大量のコードをアップロードするのに苦労しているため、解決策について説明します。ここでは、コード編集機能には使用されていません。詳細については、APIリファレンスを参照してください。

それでは、始めましょう：

map.AddOverlay（）を使用してポリゴンを追加すると、マップにポリゴンが保存されます。
マップへのクリックをキャッチするイベントハンドラーを宣言します。そのイベントハンドラーには、クリックされた場所のGLatLngと、クリックされたオーバーレイ（この場合はポリゴン）が渡されます。単純なタイプテストを実行して、オーバーレイがポリゴンであるかどうかを判断できます。
イベントハンドラーでmap.openInfoWindowHtml（）を使用し、場所として指定されたGLatLngと、表示するHTMLコンテンツを渡します。

とても簡単です！頭のてっぺんから詳細を覚えていないので、イベントハンドラーをアタッチする方法を調べる必要があります。したがって、APIで検索する必要があるものは次のとおりです。

マップへのイベントハンドラーの追加
オーバーレイの種類を確認する

呼び出すメソッドとすべての情報をAPIページで見つけることができるはずです。

http://code.google.com/apis/maps/documentation/reference.html

幸運を！

score 0 · Accepted Answer

V3では、引き続きinfowindowを使用しますが、構文は異なります。

function initialize() {

// SOME CODE
var mont_blanc_path_array = [ 
new google.maps.LatLng(46.21270329318585, 6.134903900311617),
new google.maps.LatLng(46.20538443787925, 6.136844716370282),
new google.maps.LatLng(46.20525043957647, 6.141375978638086)
];
zone_up_montblanc = new google.maps.Polygon({
    editable: false,    
    paths: mont_blanc_path_array,       
    fillColor: "#0000FF",
    fillOpacity: 0.5,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,     
    strokeWeight: 2
});
// Creating InfoWindow object
var infowindow = new google.maps.InfoWindow({
    content: ' ',
    suppressMapPan:true
});
eventPolygonClick = google.maps.event.addListener(zone_up_montblanc, 'click', function() {
    // MORE CODE OR FUNCTION CALLS
});
// MORE CODE

}

テキストを変更して情報ウィンドウを表示したい場所：

infowindow.setContent("CLICKED me");
infowindow.open(map, zone_up_montblanc);

ポリゴンとeventlistenerのグローバル変数を（変数宣言で「var」を抑制して）作成したので、他の関数でそれらを変更できます。これは、infowindowの動作に注意が必要です。一部の人々はinfowindowのインスタンスを好みます、私はむしろ1つのグローバルインスタンスを持ち、その場でそのコンテンツを変更したいと思います。変数宣言の影響に注意してください！

ポリゴン用の他のaddListenerは非常にバグが多く、公開前にすべての主要なブラウザでテストする必要があります。特に、DRAGGINGとMOUSEOVERのバリエーションです。

これにはいくつかの参照があります：http ：//code.google.com/apis/maps/documentation/javascript/overlays.html

google-maps - グーグルマップ：ポリゴンをクリックしてインフォウィンドウを開く方法は？

5 に答える 5

Related

Reference