向Google地图添加多个标记

Question

我正在尝试向Google地图添加多个标记.我正在使用.NET MVC 4,我正在使用包含所有坐标的数组将ViewModel传递给View.我想将所有这些显示在Google地图中.该数组在ViewModel中命名为latLngCoordinates.

@model Project.Web.ViewModels.ParkingViewModel

代码出错:

for (var i = 0; i < @Model.latLngCoordinates.Length; i++) {
            addMarker(@Model.latLngCoordinates[i]);
}

错误:当前上下文中不存在名称"i".

这段代码工作正常:

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(51.92479, 4.469833),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

        for (var i = 0; i < @Model.latLngCoordinates.Length; i++) {
            addMarker(51.918769, 4.480616);
        }

        function addMarker(x, y) {
            var location = new google.maps.LatLng(x, y);
            var marker = new google.maps.Marker({
                position: location,
                map: map,
            });
        }

    } google.maps.event.addDomListener(window, 'load', initialize);
</script>

如果我使用:

addMarker(@Model.latLngCoordinates[1])

或任何其他值高达97它的工作..

Answer 1

你用C#弄乱了JavaScript.这是Razor观点的常见错误.

你的for循环是JavaScript,因此i是JavaScript的变量.您的latLngCoordinates数组来自C#,因此它们没有直接关系.

@for (var i = 0; i < Model.latLngCoordinates.Length; i++) {
    Html.Raw("addMarker(" + Model.latLngCoordinates[i] + "); ");
}

这使您的for语句成为C#代码.所以现在,i它与你的Model的数组有关系.它会打印很多addMarker功能,因为你的latLngCoordinates长度.