如何使用C＃.NET MVC框架在谷歌标记图谱显示Azure的宇宙DB数据？

Question

我试图实现使用C＃.NET MVC框架从宇宙DB数据谷歌标记图谱。我不能够将数据传递给谷歌地图的JavaScript。我已经加入我的代码以供参考。请帮忙。谢谢

我是新的C＃开发人员。我使用Azure的宇宙分贝application.I数据库尝试了不同的方法，以谷歌地图脚本来传递数据，但它不能正常工作。

模型：

public class Device
{
  [JsonProperty(PropertyName = "id")]
  public string Id { get; set; }

  [JsonProperty(PropertyName = "Name")]
  public string Name { get; set; }

  [JsonProperty(PropertyName = "Address")]
  public string Address { get; set; }

  [JsonProperty(PropertyName = "Lat")]
  public double Lat { get; set; }

  [JsonProperty(PropertyName = "Long")]
  public double Long { get; set; }
}

控制器：

public class DeviceController : Controller
{
  public async Task<ActionResult> MapAsync() 
  {
    var items = await DocumentDBRepository<Device>.GetDevicemapAsync(d => d.Id != null);
      return View();
}

视图：

@model IEnumerable<WebApplication1.Models.Device>

<script>
@foreach (var item in Model)
{
  Html.Raw(" var features = [{position: new google.maps.LatLng(" + item.Lat + "," + item.Long + "), type: 'parking' },];");
}
</script>

<script>
var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: new google.maps.LatLng(-33.91722, 151.23064),
        mapTypeId: 'roadmap'
    });

    var iconBase = 'http://localhost:20557/Content/Images/';
    var icons = {
        parking: {
            icon: iconBase + 'trafficlight-green.png'
        }
    };



    // Create markers.
    features.forEach(function (feature) {
        var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
        });
    });
}
</script>

以上是我尝试仍然没有帮助的事情。请让我知道，如果你想要的任何详细信息，来帮助我。新来这里张贴问题。

Answer 1

请参考在here净核心MVC创建工作样品采取家庭控制器和视图index.cshtml一看指数操作。

在您的代码首先你需要传递模态查看。你的代码：

 var items = await DocumentDBRepository<Device>.GetDevicemapAsync(d => d.Id != null);
  return View();

应该通过模式来查看像下面。

 var items = await DocumentDBRepository<Device>.GetDevicemapAsync(d => d.Id != null);
  return View(items);

鉴于特征阵列的.Creation是不正确

@foreach (var item in Model)

{Html.Raw（ “VAR特征= [{位置：新google.maps.LatLng（” + item.Lat + “” + item.Long + “），类型： '停车'}，];”）; }

只要创建从像在查看C＃列表Javascript数组

  var locationArray = @Html.Raw(Json.Serialize(ViewBag.Locations));

因此，鉴于更新脚本部分可以是这样的。请参考实际工作示例GitHub的链接

 var map;
    function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
    });
    }

    $(document).ready(function() {
    initMap();

    var locationArray = @Html.Raw(Json.Serialize(ViewBag.Locations));

    var newArray = locationArray.map((value)  => { 
        return  {
            position: new google.maps.LatLng(value.lat, value.lon),
            type:'parking' 
        }
    });
      // Create markers.
    newArray.forEach(function (feature) {
        var marker = new google.maps.Marker({
            position: feature.position,
            map: map
        });
    });

    });

注：在我的样品溶液我已通过的位置列表视图用袋子查看。你可以用传球为模态。放出来会是这样qazxsw POI

编辑：要填充从列表JavaScript数组可以按照这种方式也。

Answer 2

感谢所有您的帮助@Erik和@Jeevan您的建议帮了lot.for谁都想在这里实现同样的事情是viewcode：

  var locationArray = [];

    @foreach (var item in ViewBag.Locations)
    {
         @:locationArray.push("{lat:@item.lat, lon:@item.lon}");
    }