如何在Razor中使用JavaScript進行谷歌地圖API

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

嘗試系列化你的ViewData.Model爲JavaScript對象，比循環從那裏。

事情是這樣的：

<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>