信息與折線谷歌地圖API V3

Question

我需要在彈出當有人點擊折線形成許多可用的信息窗口顯示不同的數據不同的信息寡婦，

我看過的很多方案來解決這個這裏是我一個例子來翻過，

Google Maps API - Trouble with Arrays and InfoWindows

但是這種解決方案似乎並沒有爲我工作，它不會顯示信息窗口時，我在一個折線點擊。請幫助我對此...我使用了不同的代碼，它只顯示數組的最後一個元素..我做的是我通過for loop.please添加多段線來幫助我..這是我的代碼，

var map; 
    var polylinesIn = []; 
    var infowindow = new google.maps.InfoWindow(); 
    var infowindowArray = []; 
    function initialize() { 


     var styles = [{ featureType: "landscape", stylers: [{ color: "#000514"}] }, { featureType: "administrative.country", stylers: [{ weight: 0.1 }, { color: "#009acd"}] }, { featureType: "water", stylers: [{ color: "#1f4fa5dc"}] }, { featureType: "road", stylers: [{ color: "#000514"}] }, { featureType: "administrative.locality", stylers: [{ color: "#7cfc00" }, { visibility: "off"}] }, { featureType: "landscape.man_made", stylers: [{ visibility: "off"}] }, { featureType: "poi", stylers: [{ visibility: "off"}] }, { featureType: "administrative.province", stylers: [{ visibility: "on"}]}]; 

     var mapOptions = { 
      center: new google.maps.LatLng(7.3, 80.6333), 
      zoom: 3, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 

     map.setOptions({ styles: styles }); 

     var lineSymbolIn = { 
      path: google.maps.SymbolPath.CIRCLE, 
      scale: 2, 
      strokeColor: '#FF8000' 
     }; 


     for (var i = 0; i < 5; i = i + 1) { 

      var conentVal = i.toString(); 
      //var infowindow = new google.maps.InfoWindow(); 
      var netTrafficIn = [ 
      new google.maps.LatLng(53.3333866 + i, -6.247401 + i), 
      new google.maps.LatLng(7.3, 80.6333)]; 

      var polylineIn = new google.maps.Polyline({ 
       path: netTrafficIn, 
       icons: [{ icon: lineSymbolIn, offset: '100%'}], 
       strokeColor: " #FF8000", 
       strokeOpacity: 1.0, 
       strokeWeight: 1, 
       geodesic: true 

      }); 
      polylineIn.setMap(map); 
      polylinesIn[i]=polylineIn; 
      animateCircleIn(i); 

      addInfowindow(i.toString()); 
      createInfoWindow(i);           
     } 

    } 

    function addInfowindow(contentVal) { 
     infowindow = new google.maps.InfoWindow({ content: contentVal }); 
     infowindowArray.push(infowindow); 
    } 

    function createInfoWindow(id) { 
     google.maps.event.addListener(polylinesIn[id], 'click', (function (id) { 
      return function() { 
       infowindowArray[id].open(map, polylinesIn[id]); 
      } 
     })(id)); 

    } 

    function animateCircleIn(id) { 
     var count = 0; 
     offsetId = window.setInterval(function() { 
      count = (count + 1) % 200; 

      var icons = polylinesIn[id].get('icons'); 
      icons[0].offset = (count/2) + '%'; 
      polylinesIn[id].set('icons', icons); 
     }, 20); 

    } 

非常感謝你:)

奧基我做了一些更改，如巴亞拉建議，但還是信息窗口犯規appear..please help..thank你非常:)

Answer 1

另一個問題你鏈接到描述你的問題。你必須使用你迭代的變量的副本，以便它不會改變它的值。我把它拿給你在你前面的問題：Animate symbol on multiple geodesic polylines

你可以只移動連接您的活動運作animateCircle這已經這是否：

function animateCircleIn(id) { 
    var count = 0; 
    offsetId = window.setInterval(function() { 
     count = (count + 1) % 200; 

     var icons = polylinesIn[id].get('icons'); 
     icons[0].offset = (count/2) + '%'; 
     polylinesIn[id].set('icons', icons); 
    }, 20); 

     google.maps.event.addListener(polylinesIn[id], 'click', function (event) { 
      infowindow.content = "x" + id.toString(); 
      infowindow.position = event.latLng; 
      infowindow.open(map); //,flightPath); 
     }); 
} 

但這裏真正的問題是，你沒有學到任何東西，從您之前的問題或您在問題中鏈接的問題。你應該閱讀關於「JavaScript關閉」。我真的希望這是你最後一次問到這個問題。

Answer 2

問題是，您正在使用相同的infoWindow所有多段線。 當你的代碼

google.maps.event.addListener(polylinesIn[id], 'click', function (event) { 
      infowindow.content = "x" + id.toString(); 
      infowindow.position = event.latLng; 
      infowindow.open(map); //,flightPath); 
    }); 

這部分改變信息窗口的值更改引用的第一個的價值，並與折線ancored也可能發生變化的所有信息窗口。您在函數內部使用的infowindow不是實例化的副本，而是參考。

在這種情況下，您可以嘗試兩種不同的東西。首先是在你的函數中使用infowindow = new google.maps.InfoWindow();創建一個你想要的每條多段線的infowindow。

或者你可以創建一個新的洞的範圍。在這種情況下，我建議你閱讀這篇文章：Google Maps API - Trouble with Arrays and InfoWindows

Answer 3

下面的代碼工作：

  (function (id) { 
       google.maps.event.addListener(polylinesIn[id], 'click', function (event) { 
        infowindow.content = "x" + id.toString(); 
        infowindow.position = event.latLng; 
        infowindow.open(map); //,flightPath); 
       }); 
      })(i) 

我加入這個瓶蓋內的for循環，其解決了這個問題..多謝指點我在正確的方向，傢伙.. :)