向Google地图添加多个标记

时间:2013-06-19 16:01:47

标签: javascript asp.net-mvc google-maps

我正在尝试向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的工作..

1 个答案:

答案 0 :(得分:5)

你正在用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与模型的数组有关系。它将在addMarker长度上打印许多latLngCoordinates函数。