web-dev-qa-db-ja.com

マーカーコンテンツ（infoWindow）Googleマップ

Googleマップ上の複数のマーカーにinfoWindowを追加しようとしています。私が来た最も近いのは、すべてのマーカーで、配列で見ることができる最後のアドレスを表示するinfoWindowを取得することです。以下に貼り付けたコードの一部が機能せず、「不明なTypeError：未定義のプロパティ「4」を読み取れません」が表示されます。これはスコープの問題であると確信していますが、ここでは円で囲み、いくつかの助けを借りて行うことができます：

var hotels = [
            ['ibis Birmingham Airport', 52.452656, -1.730548, 4, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3AW','(+44)1217805800','(+44)1217805810','[email protected]','http://www.booknowaddress.com'],
            ['ETAP Birmingham Airport', 52.452527, -1.731644, 3, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3QL','(+44)1217805858','(+44)1217805860','[email protected]','http://www.booknowaddress.com'],
            ['ibis Birmingham City Centre', 52.475162, -1.897208, 2, 'Ladywell Walk<br />Birmingham<br />B5 4ST','(+44)1216226010','(+44)1216226020','[email protected]','http://www.booknowaddress.com']
        ];

        for (var i = 0; i < hotels.length; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
                map: map,
                icon: image,
                title: hotels[i][0],
                zIndex: hotels[i][2]
            });

            var infoWindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker, 'click', function () {
                var markerContent = hotels[i][4];
                infoWindow.setContent(markerContent);
                infoWindow.open(map, this);
            });
        }

期待していただきありがとうございます。

javascriptgoogle-mapsgoogle-maps-markersinfowindow
29
DarrylGodden

これを解決しましたが、forの外でaddListenerを使用しても違いが生じるとは思わなかったようです。答えは次のとおりです。

InfoWindowの情報を含む新しい関数を作成します。

function addInfoWindow(marker, message) {

            var infoWindow = new google.maps.InfoWindow({
                content: message
            });

            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.open(map, marker);
            });
        }

次に、配列IDと作成するマーカーを指定して関数を呼び出します。

addInfoWindow(marker, hotels[i][3]);
49
DarrylGodden

この質問はすでに回答されていますが、このアプローチの方が良いと思います： http://jsfiddle.net/kjy112/3CvaD/ StackOverFlowでこの質問から抽出 google maps-open marker infowindow座標が与えられた場合 ：

各マーカーは「infowindow」エントリを取得します。

function createMarker(lat, lon, html) {
    var newmarker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lon),
        map: map,
        title: html
    });

    newmarker['infowindow'] = new google.maps.InfoWindow({
            content: html
        });

    google.maps.event.addListener(newmarker, 'mouseover', function() {
        this['infowindow'].open(map, this);
    });
}
32
BenC