由于 Razor 语法，ASP.Net 网页上的 Bing 地图无法呈现

问题描述

我正在使用 Bing Maps REST Toolkit 和 ASP.Net MVC 创建导航应用程序。但是，每当我运行该应用程序时，地图都无法在网页上呈现，并且除了空白屏幕之外什么也没有。我推断这个问题与接收位置数据的地图 JavaScript 中的 Razor 语法有关，在这些行中：

@if (Model.StopList != null){
   foreach(var StopLocation in Model.StopList){
       @:addNewWaypoint(@StopLocation.Name,@StopLocation.Geocode,directionsManager);
   }
}

我正在努力寻找具体问题所在，并且想不出任何解决方案或变通方法。有什么我遗漏的吗？

提前致谢，我的代码如下：

MapController.cs：

public async Task<ActionResult> Index(){

            var Stops = new List<Stops> {
                new Stops (1,"Shelton Care",null,"ST4 7AA"),new Stops (2,"Stoke Station","ST4 2AA"),new Stops (3,"Stop 1","ST3 1TN"),};

            StopLists Model = new StopLists
            {
                StopList = Stops
            };

            var GeocodeList = new List<Task>();

            foreach (var StopLocation in Stops)
            {
                var gct = AddGeocode(StopLocation);
                GeocodeList.Add(gct);
            };

            await Task.WhenAll(GeocodeList);

            return View(Model);

        }

Index.cshtml：

@model FYP2._1.Models.StopLists
@{
    Layout = null;
}

<!DOCTYPE html>

<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <Meta charset="utf-8" />

    <title></title>
</head>
<body onload="GetMap();">
    <form id="form1" runat="server">

        <div id="myMap" style='position:relative;width:600px;height:400px; top: 0px; left: 0px;'></div>
        <div id="itineraryContainer"></div>

        <script type="text/javascript">
            function GetMap() {

                var MapsKey = 'mymapsKey';

                var map = new Microsoft.Maps.Map('#myMap',{
                    credentials: MapsKey,center: new Microsoft.Maps.Location(53.0146,-2.1864),zoom: 17
                });

                var center = map.getCenter();

                getRoute(map);

                getTraffic(map)

            }

            function getRoute(map) {

                Microsoft.Maps.loadModule('Microsoft.Maps.Directions',function () {
                    var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

                    //Set Route Mode to driving
                    directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });

                    //iterates through locations and makes waypoints from them
                    @if (Model.StopList != null)
                    {
                        foreach(var StopLocation in Model.StopList)
                        {
                            @:addNewWaypoint(@StopLocation.Name,directionsManager);
                        }
                    }

                    // Shows where the written directions will be rendered
                    directionsManager.setRenderOptions({ itineraryContainer: '#itineraryContainer' });

                    directionsManager.calculateDirections();

               });
            }

            function addNewWaypoint(name,geocode,directionsManager) {
                var Stop = new Microsoft.Maps.Directions.Waypoint({
                    address: name,location: geocode,});
                directionsManager.addWaypoint(Stop);
            }

解决方法

我怀疑您的问题与停靠点的地理编码属性格式有关。我建议在 addNewWaypoint 函数中添加一个断点，并验证地理编码值是否为位置对象。还要验证方向管理器是否也存在那里。

asp.net-mvc bing-maps c#c#javascript razor razor razor