GoogleマップのJavaScript RazorでJavaScriptを使用する方法

Question

データベースからの座標を使用して、マップに一連のマーカーを配置するために 'foreach'ループを使用しようとしています。データの取得は問題ではありませんので、私は正しい場所を示す地図について気にしません。問題は、 'foreach'ループの内部で、マーカー配置のコードがすぐに渡されるということです。何か案は？ここで

は、現在のコードです：

<script> 
    function myMap() { 
     var lat = 52.4283381; 
     var lng = -1.601519; 
     var myLatLng = { lat: 52.428381, lng: -1.601519 }; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 5, 
      center: new google.maps.LatLng(lat, lng) 
     }); 
    } 
</script> 

<script> 
    @foreach (var mapVars in ViewData.Model) 
    { 
     <text> 
     var marker = new google.maps.Marker 
     ({ 
      position: new google.maps.LatLng (52.428381 , -1.601519), 
      map: map, 
      title: "" + i, 
     }); 

     </text> 
    } 
</script> 


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfvqLwEOTU3oFoiJOmmloYJFYUA801lF8&callback=myMap"></script> 

Answer 1

はjavascriptオブジェクトにし、そこからループよりも、あなたのViewData.Modelをシリアル化してみます。

このような何か：

<script> 
    function myMap() { 
     var lat = 52.4283381; 
     var lng = -1.601519; 
     var myLatLng = { lat: 52.428381, lng: -1.601519 }; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 5, 
      center: new google.maps.LatLng(lat, lng) 
     }); 
    } 
</script> 

<script> 
    window.data = @(Html.Raw(js.Serialize(ViewData.Model))); 
    var markers = []; 
    for(i = 0; i < window.data.length; i++) 
    { 
     markers.push(new google.maps.Marker 
     ({ 
      position: new google.maps.LatLng (52.428381 , -1.601519), 
      map: map, 
      title: "" + i, 
     })); 
    } 
</script> 


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfvqLwEOTU3oFoiJOmmloYJFYUA801lF8&callback=myMap"></script>