如何顯示特定於標記的infowindow中的內容？

我根據搜索結果創建了帶有標記數量的Google地圖（api v3）。當我點擊一個標記時，它會打開一個infowindow。讓infowindow顯示與其標記相關的信息的最佳方式是什麼？與所有標記相關的信息位於我從ajax請求接收的json對象中。如何顯示特定於標記的infowindow中的內容？

for (i=0; i < result.point.length; i++) { 
        var latLng = new google.maps.LatLng(result.proint[i].Latitude,result.point[i].Longitude);          
        var marker = new google.maps.Marker({ 
         position: latLng, 
         title: i.toString() 
         //map: map 
        }); 
        markersArray.push(marker); 

        var infowindow = new google.maps.InfoWindow({ 
         content: 'specific information associated to the marker clicked' 
        }); 

        google.maps.event.addListener(markersArray[i], 'click', function(event) { 
         infowindow.open(map, this); 
        });

來源

2012-03-08 S D

鏈接到居住碼將是有價值的。 – andresf 2012-03-08 23:40:40

你想要多個信息窗口還是隻有一個？您的代碼現在的方式是爲每個標記創建一個新的信息窗口，但是隻會顯示最後一個創建的信息窗口。如果你的意圖是隻有一個，那麼你應該把它的創建移出for循環。 – puckhead 2012-03-08 23:52:26

我同意更多的代碼會有幫助，至少是JSON對象。 – puckhead 2012-03-09 00:01:25

-1

不完全確定你在做什麼。您嘗試加載哪個/哪些內容？

google.maps.event.addListener(marker, 'click', (function(event, index) { 
    return function(){ 
    infowindow.content = markersArray[index].yourcontent; 
    // or 
    infowindow.content = yourcontentarray[index]; 
    infowindow.open(map,this); 
    } 
})(marker,i));

請確保您在函數外聲明瞭標記和infowindow變量。

來源

2012-03-09 02:55:15

這段代碼有幾個缺陷。首先，** event **是IIFE的一個參數，它應該是返回函數的參數。這裏的事件實際上等於傳入的標記，而不是事件。標記甚至不需要傳入。接下來，您應該使用infowindow的setContent方法，而不是直接設置content屬性。雖然設置屬性將起作用，但它會繞過MVCObject的KVO優勢。例如，使用setContent將觸發infowindow的content_changed事件，直接設置該屬性不會。 – puckhead 2012-03-09 16:21:29

您的例子一些錯別字（proint）在你循環的頂部：

for (i=0; i < result.point.length; i++) { 
    var info_window_content = result.point[i].Latitude + '<br />'; 
    info_window_content += result.point[i].Longitue + '<br />'; 
    // etc for any value in you json object 
    // create your marker as is. 
    ... 
    var infowindow = new google.maps.InfoWindow({ 
        content: info_window_content 
       }); 
    // etc, etc.

你確實需要一個事件監聽添加到每個標記，因爲你在做什麼。我沒有看到任何問題。除了我會使用infoWindow.open（地圖，標記）與此。

有可能是一個更有效的方法來做到這一點，即infoWindow.open（）;之後; infoWindow.setContent（info_window_content）

來源

2012-03-09 00:49:07

謝謝埃裏克！我首先使用了'this'，這樣infowindow就會根據標記進行定位。我實施了您的解決方案，但可能會因爲內容保持不變而出錯。尋找加載與標記關聯的內容的方法。 – 2012-03-09 01:28:23

首先，您應該將forWindow的創建從for循環移出。

下一頁下，更改附加click事件到這一點：

google.maps.event.addListener(markersArray[i], 'click', function(content) { 
    return function(event){ 
     infowindow.setContent(content); 
     infowindow.open(map, this); 
    } 
}(WHATEVER_THE_CONTENT_SHOULD_BE_FOR_THIS_MARKER));

你想用，而不是這標記。這個將引用事件發生的對象，而標記將引用創建的最後一個標記。

來源

2012-03-09 02:00:27 puckhead

以下鏈接由其他人發佈。這是我想要實現的一個完美例子。 http://updates.orbitz.com/ – 2012-03-09 02:30:10

上面應該得到你想要的。如果不是，你能提供更新的代碼嗎？另外，以JavaScript格式代替PHP的JSON示例會更有幫助。 – puckhead 2012-03-09 02:49:33

它最終奏效！ synthax錯誤... Shane，傻瓜，我非常感謝你的幫助。 – 2012-03-09 03:08:24

如上建議只創建1個infoWindow。

標記內的內容存儲：

var marker = new google.maps.Marker({ 
         position: latLng, 
         title: i.toString(), 
         //set your content here 
         content:'your specific content' 
         //map: map 
        });

窗口的開放：

google.maps.event.addListener(markersArray[i], 'click', function(event) { 
         infoWindow.setContent(this.content); 
         infowindow.open(map, this); 
        });

來源

2012-03-09 08:44:23

試試這個，它的工作原理我測試了它已經

// Add markers 

    for (i=0; i < result.point.length; i++) { 
        var latLng = new google.maps.LatLng(result.proint[i].Latitude, result.point[i].Longitude);          
        var marker = new google.maps.Marker({ 
         position: latLng, 
         title: i.toString() 
         //map: map 
        });      

    // marker info start 
        var infowindow = new google.maps.InfoWindow(); 

    (function (marker, result.point[i]) { 
        // add click event 
        google.maps.event.addListener(marker, 'click', function() { 
        var infoContent: "specific information associated to the marker clicked" 
        }); 
     infoWindow.setContent(infoContent); 
         infowindow.open(map, marker); 
        }); 

    // selected marker 4 infowindow 
    (marker, result.point[i]); 

     markersArray.push(marker); 
     }

來源

2013-05-29 17:44:24

如何顯示特定於標記的infowindow中的內容？

回答

相關問題