Question

我正在使用Asp.net MVC开发一个Web应用程序，需要在Google Maps Api JavaScript上添加多个标记。

在视图中，我将模型称为“车辆对象”列表。

<script>



function initMap() {

    var myLatLng = { lat: 48.584715, lng: 7.748556 };

    // Create a map object and specify the DOM element
    // for display.
    var map = new google.maps.Map(document.getElementById('carte'), {
        center: myLatLng,
        zoom: 14
    });

    // Create a marker and set its position.

    @foreach(var item in Model){
         <text>
              var marker = new google.maps.Marker({
              map: map,
              position: { lat: @item.VehicleLocation.Latitude, lng: @item.VehicleLocation.Longitude },
              title: 'Hello World!'
        </text>
        }

}</script>

我使用@foreach块为列表的每个对象放置一个标记。

没有这个@foreach部分，我们可以看到地图。但是当我输入@foreach时，地图不会显示。

我不明白问题所在

我该如何解决？

Answer 1

由于未关闭google.maps.Marker（...）调用，因此引发了语法错误。

@foreach(var item in Model){
     <text>
        var marker = new google.maps.Marker({
          map: map,
          position: { lat: @item.VehicleLocation.Latitude, lng: @item.VehicleLocation.Longitude },
          title: 'Hello World!'
        });
    </text>
}

通知结束});

Answer 2

好！

所以问题出在我的对象定义中。纬度和经度是双精度值，而不是字符串值。所以用逗号而不是点来协调

我在对象中添加了两个字符串字段，并将坐标转换为它：

在控制器中：

                foreach(var item in VehiculesList)
        {

            item.VehicleLocation.Lat_String = item.VehicleLocation.Latitude.ToString().Replace(",", ".");
            item.VehicleLocation.Long_String = item.VehicleLocation.Longitude.ToString().Replace(",", ".");
        }

在视图中：

<script>



function initMap() {

    var myLatLng = { lat: 48.584715, lng: 7.748556 };

    // Create a map object and specify the DOM element
    // for display.
    var map = new google.maps.Map(document.getElementById('carte'), {
        center: myLatLng,
        zoom: 14
    });

    // Create a marker and set its position.

    @foreach(var item in Model){
         <text>
              var marker = new google.maps.Marker({
              map: map,
              position: { lat: @item.VehicleLocation.Lat_String, lng: @item.VehicleLocation.Long_String },
              title: 'Hello World!'
            });
        </text>

    }

}</script>

MVC asp.net中Googe Map Api上的多个标记

2 个答案: