1

私のウェブサイトには、英国周辺の場所のリストを表示する Google マップがあります。ただし、情報ウィンドウには、個々のレコードごとに同じレコードが表示されます。私のコードは下にあります。何か理由は？

var locations = [[52.478899, -1.894055, 'test 1', '87', 'Name: test 1'],
[52.479474, -1.895946, 'test 2', '88', 'Name: test 2 '],
[52.477082, -1.893929, 'test 3', '89', 'Name: test 3 ']];


function initialize() {

var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(52.528680, -1.839480),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var bounds = new google.maps.LatLngBounds();


for (var i = 0; i < locations.length; i++) {
    var curLoc = locations[i];
    myLatLng = new google.maps.LatLng(curLoc[0], curLoc[1]);
    var beachMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: curLoc[2],
        data: curLoc[4], //add content to the Marker-object
        zIndex: 50 - i
    });

    var infowindow = new google.maps.InfoWindow({
        content: curLoc[4]
    });

    google.maps.event.addListener(beachMarker, 'click', (function() {
        infowindow.setContent(beachMarker.data);
        infowindow.setPosition(beachMarker.position);
        infowindow.open(map);
    }));

    bounds.extend(myLatLng);
    map.fitBounds(bounds);


}
}

google.maps.event.addDomListener(window, 'load', initialize);

更新: コードを変更しましたが、問題は解決しませんが、マーカーをクリックすると、最後のマーカーのテキストが表示されるだけでなく、最後のマーカーに焦点が当てられます。

サンプルの URL は次のとおりですhttp://map.projects.webskii.com/default.html

4

3 に答える 3

14

これらの状況で使用する回避策は、作成時にマーカーにIDを割り当てることです。このIDはコールバックで使用できるため、オンデマンドで HTML コンテンツをフェッチするために使用できます。方法は次のとおりです。

var locations = [
    [52.478899, -1.894055, 'test 1', '87', 'Name: test 1'],
    [52.479474, -1.895946, 'test 2', '88', 'Name: test 2'],
    [52.477082, -1.893929, 'test 3', '89', 'Name: test 3']
];
var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(52.528680, -1.839480),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow(); // 2: infoWindow is global
var markerClickHandler = function () {
    infoWindow.setContent(locations[this.dataId][4]); // 3: use dataId stored in marker to fetch content from locations array
    infoWindow.open(map, this);
};
var bounds = new google.maps.LatLngBounds();
var i;
for (i = 0; i < locations.length; i++) {
    var latlng = new google.maps.LatLng(locations[i][0], locations[i][1]);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: locations[i][2],
        dataId: i // 1: assign an id
    });
    bounds.extend(latlng);
    google.maps.event.addListener(marker, "click", markerClickHandler);
}
map.fitBounds(bounds);

ここでデモ。ID の代わりにテキスト/HTML をマーカーに格納することもできることに注意してください。

于 2013-06-17T08:16:00.340 に答える
1

常に最後のレコードのデータが表示されると思いますか? 例 infowindow.setContent(curLoc[4]); curLoc は常にデータセットの場所の最後です。

代わりにこれを試してください

var beachMarker = new google.maps.Marker({
     position: myLatLng,
     map: map,
     title: curLoc[2],
     data : curLoc[4], //add content to the Marker-object 
     icon: image,
     zIndex: 50 - i,
     childMinderId: curLoc[3]
});

...

google.maps.event.addListener(beachMarker, 'click', (function () {
    infowindow.setContent(beachMarker.data);
    infowindow.setPosition(beachMarker.position);
    infowindow.open(map);
}
于 2013-06-12T12:01:03.847 に答える
0

davidkonrad応答への単なる補遺。最後のデータがポップアップするという同じ問題がありました。マーカー上のデータを使用して 'this' を使用すると、マーカー上のデータとマーカー オブジェクトの位置が取得されます。

google.maps.event.addListener(beachMarker, 'click', (function () {
    infowindow.setContent(this.data);
    infowindow.open(map,this);
}
于 2014-09-22T10:13:12.970 に答える