infowindow.setContent는 하나의 레코드 만 표시합니다.

Question

저는 Laravel의 프로젝트에서 작업하고 있습니다.

이것은 Google지도에서 여러 마커가있는지도를 표시하기 위해 수행 한 스크립트입니다. 2 개의 json 객체를 가지고 있는데, 하나는 위치 정보이고 하나는 자동차 정보입니다. 위치는 많은 자동차를 가질 수 있으므로 일대 다 관계입니다.

내가하려는 것은 infowindow.setContent에 위치에 대한 설명과 해당 위치에 속한 자동차를 표시하는 것입니다. 지도에서 적절한 위치의 마커가 올바르게 표시됩니다. 그러나 infowindow.setContent에는 위치 및 해당 위치에 속한 자동차의 마지막 레코드에 대한 설명과 설명이 표시됩니다.

스크립트를 실행하면 console.log이 정보를 표시합니다. 즉, 자동차에 대한 내 루프는 잘 작동하지만, 결과를 infowindow.setContent에 전달하면 마지막 레코드 만 읽습니다.

처음으로 도움을 요청하는 것이므로 충분히 명확하지 않으면 실례합니다. 나는 저에게 응답하는 누군가에 아주 고맙게 여길 것입니다.

내 스크립트 : 당신은 당신의 루프 내에서 autoBrands의 가치를 재 할당과 같은

<script type="text/javascript"> 

    var locations = @json($locations); 
    var autos = @json($autos); 
    var infowindow = new google.maps.InfoWindow(); 


    var mymap = new GMaps({ 
     el: '#mymap', 
     center: {lat: 41.323029, lng: 19.817856}, 
     zoom:6 
    }); 



    $.each(locations, function(index, value){ 

     mymap.addMarker({ 
      lat: value.lat, 
      lng: value.long, 
      title: value.title, 
      click: function(e) { 

       for (var auto in autos) 
       { 
        if(autos[auto].location_id == value.id) 
        { 

         var autoBrands =autos[auto].brand; 
         console.log(autoBrands); 

        } 
       } 


       infowindow.setContent('<div><strong>' + autoBrands + '</strong><br></div>'+ '<div><strong>' + value.title + '</strong><br></div>' + '<div><strong>' + value.description + '</strong><br></div>'); 

       infowindow.open(mymap, this); 

      } 
     }); 

    }); 

</script> 

Answer 1

것 같습니다. 배열 객체로 만들면 어떨까요? 이 도움이

<script type="text/javascript"> 

    var locations = @json($locations); 
    var autos = @json($autos); 
    var infowindow = new google.maps.InfoWindow(); 


    var mymap = new GMaps({ 
     el: '#mymap', 
     center: {lat: 41.323029, lng: 19.817856}, 
     zoom:6 
    }); 



    $.each(locations, function(index, value){ 

     mymap.addMarker({ 
      lat: value.lat, 
      lng: value.long, 
      title: value.title, 
      click: function(e) { 

       var autoBrands = []; 
       for (var auto in autos) 
       { 
        if(autos[auto].location_id == value.id) 
        { 

         autoBrands.push(autos[auto].brand); 
         console.log(autoBrands); 

        } 
       } 


       infowindow.setContent('<div><strong>' + autoBrands.join(",") + '</strong><br></div>'+ '<div><strong>' + value.title + '</strong><br></div>' + '<div><strong>' + value.description + '</strong><br></div>'); 

       infowindow.open(mymap, this); 

      } 
     }); 

    }); 

희망 같은 것!

Answer 2

모든 위치를 반복하면서 각각에 대해 표식을 추가합니다. 그러나 변수는 infowindow입니다. 루프를 반복 할 때마다 동일한 정보 창의 내용이 업데이트되므로 마지막 반복에서 내용을 가져옵니다.

$.each(locations, function(index, value){ 
    mymap.addMarker({ 
     lat: value.lat, 
     lng: value.long, 
     title: value.title, 
     click: function(e) { 
      for (var auto in autos) 
      { 
       if(autos[auto].location_id == value.id) 
       { 
        var autoBrands =autos[auto].brand; 
        console.log(autoBrands); 
       } 
      } 

      openInfowindow(
       '<div><strong>' + autoBrands + '</strong><br></div>'+ '<div><strong>' + value.title + '</strong><br></div>' + '<div><strong>' + value.description + '</strong><br></div>', 
       this 
      ); 
     } 
    }); 
}); 

function openInfowindow(content, marker) 
{ 
    infowindow.setContent(content); 
    infowindow.open(mymap, marker); 
} 

:

이 뭔가를 사용자의 클릭에 대한 응답으로 정보창을 여는 별도의 기능을 가지고