javascript - 向 Google map 添加多个标记

Question

我正在尝试向 Google map 添加多个标记。我正在使用 .NET MVC 4，我正在将 ViewModel 传递给带有包含所有坐标的数组的 View 。我想将所有这些显示到 Google map 中。该数组在 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

您正在将 JavaScript 与 C# 混为一谈。这是 Razor View 上的常见错误。

你的for循环是JavaScript，所以i是JavaScript的一个变量。您的 latLngCoordinates 数组来自 C#，因此它们没有直接关系。

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

这使您的 for 语句成为 C# 代码。所以现在，i 与模型的数组相关联。当您在 latLngCoordinates 长度上时，它将打印许多 addMarker 函数。