infowindow.setContentはレコードを1つしか表示しません

Question

私はLaravelのプロジェクトで作業しています。

これは、Googleマップで複数のマーカーを含む地図を表示するために行ったスクリプトです。私は、2つのjsonオブジェクトを持っています。私は場所を1つ、自動車を1つ取り込みます。場所は多くの自動車を持つことができるので、1対多の関係です。

私がしようとしているのは、infowindow.setContentに、場所の説明とその場所に属する自動車を表示することです。 マップでは、適切な位置のマーカーが正しく表示されます。しかし、infowindow.setContentには、説明と場所のタイトルと、その場所に属する自動車の最後のレコードが表示されます。

スクリプトを実行すると、console.logは情報を表示します。つまり、私のループが正常に動作していることを意味しますが、結果をinfowindow.setContentに渡すと、最後のレコードだけが読み込まれます。

私はここで助けを求めるのは初めてのことです。私が十分にはっきりしていない場合は、私に言い訳をしてください。私は私に反応する人にはとても感謝しています。

マイスクリプト：

<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

あなたは自分のループ内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) { 

       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

すべての場所をループして、それぞれにマーカーを追加しています。ただし、変数はのみです。ループが繰り返されるたびに、同じ情報ウィンドウの内容が更新されるため、最後の反復からコンテンツを取得するだけです。

$.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); 
} 

：

は、このような何かを、ユーザーのクリックに応じて情報ウィンドウを開き、別の関数を持っています