MVC asp.net中Google Map Api上的多个标记答案

【问题标题】：Multiple markers on Googe Map Api in MVC asp.netMVC asp.net中Google Map Api上的多个标记
【发布时间】：2018-12-04 04:52:35
【问题描述】：

我正在处理 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 时，地图并没有显示出来。

我不明白这个问题

我该如何解决？

【问题讨论】：

标签： javascript c# google-maps-api-3

【解决方案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>
}

注意关闭});

【讨论】：

是的，我只是纠正了谢谢但是地图仍然没有显示：/
我检查了 Firefox 中的 F12 工具，脚本显示所有 google.maps.Marker() 但我只看到了坐标。从我的车辆对象包含逗号而不是点：像位置：{ lat: 48,567803, lng: 7,709108 },
@achencraft 啊；就可以了。
好的，我已经修改了我的对象定义，因为坐标是双精度的，而不是字符串。所以地图在这里，但所有标记都在同一点上：o
编辑：地图不见了：'(

【解决方案2】：

好的！

所以问题出在我的对象定义中。纬度和经度，其中 double 值，而不是字符串值。所以用逗号而不是点来表示坐标

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

在控制器中：

                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>

【讨论】：