Bing地图无法正常显示

Question

我是NerdDinner教程。我想上传地图以显示每次晚宴的地理信息。我定义了一个名为“Map”的JS文件。还有一个“地图”局部视图。然后，我在DinnerForm视图中呈现“地图”部分视图。但是当我运行该项目时，地图没有显示。并向我显示以下错误：

Unhandled exception at line 149, column 9 in http://localhost:52372/Dinner/Edit/14 

0x800a1391 - Microsoft JScript runtime error: 'Center' is undefined 

下面显示了相关的代码以及我的问题。

地图JS：

var map = null; 
var points = []; 
var shapes = []; 
var center = null; 


function LoadMap(latitude, longitude, onMapLoaded) { 
    map = new VEMap('theMap'); 
    options = new VEMapOptions(); 
    options.EnableBirdseye = false; 

    // Makes the control bar less obtrusize. 
    map.SetDashboardSize(VEDashboardSize.Small); 
    if (onMapLoaded != null) 
     map.onLoadMap = onMapLoaded; 
    if (latitude != null && longitude != null) { 
     center = new VELatLong(latitude, longitude); 
    } 
    map.LoadMap(center, null, null, null, null, null, null, options); 
} 

function LoadPin(LL, name, description) { 
    var shape = new VEShape(VEShapeType.Pushpin, LL); 
    //Make a nice Pushpin shape with a title and description 
    shape.SetTitle("<span class=\"pinTitle\"> " + escape(name) + "</span>"); 
    if (description !== undefined) { 
     shape.SetDescription("<p class=\"pinDetails\">" + 
     escape(description) + "</p>"); 
    } 
    map.AddShape(shape); 
    points.push(LL); 
    shapes.push(shape); 
} 

function FindAddressOnMap(where) { 
    var numberOfResults = 20; 
    var setBestMapView = true; 
    var showResults = true; 
    map.Find("", where, null, null, null, 
    numberOfResults, showResults, true, true, 
setBestMapView, callbackForLocation); 
} 

function callbackForLocation(layer, resultsArray, places, 
hasMore, VEErrorMessage) { 
    clearMap(); 
    if (places == null) 
     return; 
    //Make a pushpin for each place we find 
    $.each(places, function (i, item) { 
     description = ""; 
     if (item.Description !== undefined) { 
      description = item.Description; 
     } 
     var LL = new VELatLong(item.LatLong.Latitude, 
     item.LatLong.Longitude); 
     LoadPin(LL, item.Name, description); 
    }); 
    //Make sure all pushpins are visible 
    if (points.length > 1) { 
     map.SetMapView(points); 
    } 
    //If we've found exactly one place, that's our address. 
    if (points.length === 1) { 
     $("#Latitude").val(points[0].Latitude); 
     $("#Longitude").val(points[0].Longitude); 
    } 
} 

function clearMap() { 
    map.Clear(); 
    points = []; 
    shapes = []; 
} 

地图局部视图：

@model NerdDinner.Models.Dinner 

<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script> 
<script src="/Scripts/Map.js" type="text/javascript"></script> 

<div id="theMap"> 
    </div> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     var latitude = @Model.Latitude; 
     var longitude = @Model.Longitude; 

     if ((latitude == 0) || (longitude == 0)) 
      LoadMap(); 
     else 
      LoadMap(latitude, longitude, mapLoad); 
    }); 

    function mapLoad() 
    { 
     var title = "@Html.Encode(Model.Title)" 
     var address = "@Html.Encode(Model.Address)" 

     LoadPin(Center,title,address); 
     map.setZoomLevel(14); 
    } 
    </script> 

DinnerForm观点：

@model NerdDinner.Models.DinnerFormViewModel 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>Dinner</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Dinner.Title) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Dinner.Title) 
      @Html.ValidationMessageFor(model => model.Dinner.Title) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Dinner.Latitude) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Dinner.Latitude) 
      @Html.ValidationMessageFor(model => model.Dinner.Latitude) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Dinner.Longitude) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Dinner.Longitude) 
      @Html.ValidationMessageFor(model => model.Dinner.Longitude) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Dinner.EventDate) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Dinner.EventDate) 
      @Html.ValidationMessageFor(model => model.Dinner.EventDate) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Dinner.ContactPhone) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Dinner.ContactPhone) 
      @Html.ValidationMessageFor(model => model.Dinner.ContactPhone) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Dinner.Address) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Dinner.Address) 
      @Html.ValidationMessageFor(model => model.Dinner.Address) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Dinner.Country) 
     </div> 
     <div class="editor-field"> 
      @Html.DropDownList("Country", @Model.Countries) 
      @Html.ValidationMessageFor(model => model.Countries) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Dinner.HostedBy) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Dinner.HostedBy) 
      @Html.ValidationMessageFor(model => model.Dinner.HostedBy) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Dinner.Description) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Dinner.Description) 
      @Html.ValidationMessageFor(model => model.Dinner.Description) 
     </div> 

     <p> 
      <input type="submit" value="Save" /> 
     </p> 

     <div id="mapDiv"> 
      @{Html.RenderPartial("Map", Model.Dinner);} 
     </div> 

    </fieldset> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#Address").blur(function (evt) { 
       $("#Latitude").val(""); 
       $("#Longitude").val(""); 

       var address = jQuery.trim($("#Address").val()); 
       if (address.length < 1) 
        return; 

       FindAddressOnMap(address); 
      }); 
     }); 
     </script> 
} 

Answer 1

我觉得这方面可能是你的问题：

function mapLoad() 
{ 
    var title = "@Html.Encode(Model.Title)" 
    var address = "@Html.Encode(Model.Address)" 

    LoadPin(Center,title,address); //this line 
    map.setZoomLevel(14); 
} 

我没有在该范围的任何地方看到名为“中心”的变量。这是149线吗？

Unhandled exception at line 149 ... 

0x800a1391 - Microsoft JScript runtime error: 'Center' is undefined