Html Bing地图无法显示

我想在我的项目上上传Bing地图（MVC3和Razor引擎）。我有创建和编辑视图来处理晚餐以及显示bing地图。问题是只有“编辑视图”可以显示地图，而“创建视图”不能。但这两种观点都提出了一种被称为“dinneform”的特殊观点。我想知道为什么会出现这个问题

创建视图

@model NerdDinner.Models.DinnerFormViewModel

@{
    ViewBag.Title = "Create";
}

<h2>Host a dinner</h2>

<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>

@{Html.RenderPartial("DinnerForm");}

@model NerdDinner.Models.viewmodel
@{
ViewBag.Title=“创建”；
}
设宴
@{Html.RenderPartial（“dinnePerform”）；}

编辑观点

@model NerdDinner.Models.DinnerFormViewModel


    ViewBag.Title = @Html.Encode(Model.Dinner.Title);

<h2>Edit</h2>

<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>

@{Html.RenderPartial("DinnerForm");}

@model NerdDinner.Models.viewmodel
ViewBag.Title=@Html.Encode（Model.Dinner.Title）；
编辑
@{Html.RenderPartial（“dinnePerform”）；}

晚餐表演观

@model NerdDinner.Models.DinnerFormViewModel

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <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>
}

@model NerdDinner.Models.viewmodel
@使用（Html.BeginForm（））{
@Html.ValidationSummary（true）
@LabelFor（model=>model.Dinner.Title）
@EditorFor（model=>model.Dinner.Title）
@Html.ValidationMessageFor（model=>model.Dinner.Title）
@LabelFor（model=>model.Dinner.Latitude）
@EditorFor（model=>model.Dinner.Latitude）
@Html.ValidationMessageFor（model=>model.Dinner.Latitude）
@LabelFor（model=>model.Dinner.Longitude）
@EditorFor（model=>model.Dinner.Longitude）
@Html.ValidationMessageFor（model=>model.Dinner.Longitude）
@LabelFor（model=>model.Dinner.EventDate）
@EditorFor（model=>model.Dinner.EventDate）
@Html.ValidationMessageFor（model=>model.Dinner.EventDate）
@LabelFor（model=>model.Dinner.ContactPhone）
@EditorFor（model=>model.Dinner.ContactPhone）
@Html.ValidationMessageFor（model=>model.Dinner.ContactPhone）
@LabelFor（model=>model.Dinner.Address）
@EditorFor（model=>model.Dinner.Address）
@Html.ValidationMessageFor（model=>model.Dinner.Address）
@LabelFor（model=>model.Dinner.Country）
@Html.DropDownList（“Country”，@Model.Countries）
@Html.ValidationMessageFor（model=>model.Countries）
@LabelFor（model=>model.Dinner.HostedBy）
@EditorFor（model=>model.Dinner.HostedBy）
@Html.ValidationMessageFor（model=>model.Dinner.HostedBy）
@LabelFor（model=>model.Dinner.Description）
@EditorFor（model=>model.Dinner.Description）
@Html.ValidationMessageFor（model=>model.Dinner.Description）


@{Html.RenderPartial（“Map”，Model.Dinner）；}
$（文档）.ready（函数（）{
$（“#地址”）.blur（函数（evt）{
$（“#纬度”）.val（“”）；
$（“#经度”）.val（“”）；
var address=jQuery.trim（$（“#address”）.val（）；
如果（地址长度<1）
返回；
FindAddressOnMap（地址）；
});
});
}

地图视图很好，因为它显示在“编辑”页面上

我有一个名为NerdDinner的js文件来访问map函数。FindAddressOnMap（）函数就是在这里定义的

function NerdDinner() { }

NerdDinner.MapDivId = 'theMap';
NerdDinner._map = null;
NerdDinner._points = [];
NerdDinner._shapes = [];

NerdDinner.LoadMap = function (latitude, longitude, onMapLoaded) {
    NerdDinner._map = new VEMap(NerdDinner.MapDivId);

    var options = new VEMapOptions();

    options.EnableBirdseye = false

    // Makes the control bar less obtrusize.
    this._map.SetDashboardSize(VEDashboardSize.Small);

    if (onMapLoaded != null)
        NerdDinner._map.onLoadMap = onMapLoaded;

    if (latitude != null && longitude != null) {
        var center = new VELatLong(latitude, longitude);
    }

    NerdDinner._map.LoadMap(center, null, null, null, null, null, null, options);
}

NerdDinner.ClearMap = function () {
    NerdDinner._map.Clear();
    NerdDinner._points = [];
    NerdDinner._shapes = [];
}

NerdDinner.LoadPin = function (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>");
    }

    NerdDinner._map.AddShape(shape);
    NerdDinner._points.push(LL);
    NerdDinner._shapes.push(shape);
}

NerdDinner.FindAddressOnMap = function (where) {
    var numberOfResults = 1;
    var setBestMapView = true;
    var showResults = true;
    var defaultDisambiguation = true;

    NerdDinner._map.Find("", where, null, null, null,
                         numberOfResults, showResults, true, defaultDisambiguation,
                         setBestMapView, NerdDinner._callbackForLocation);
}

NerdDinner._callbackForLocation = function (layer, resultsArray, places, hasMore, VEErrorMessage) {
    NerdDinner.ClearMap();

    if (places == null) {
        NerdDinner._map.ShowMessage(VEErrorMessage);
        return;
    }

    //Make a pushpin for each place we find
    $.each(places, function (i, item) {
        var description = "";
        if (item.Description !== undefined) {
            description = item.Description;
        }
        var LL = new VELatLong(item.LatLong.Latitude,
                        item.LatLong.Longitude);

        NerdDinner.LoadPin(LL, item.Name, description);
    });

    //Make sure all pushpins are visible
    if (NerdDinner._points.length > 1) {
        NerdDinner._map.SetMapView(NerdDinner._points);
    }

    //If we've found exactly one place, that's our address.
    //lat/long precision was getting lost here with toLocaleString, changed to toString
    if (NerdDinner._points.length === 1) {
        $("#Latitude").val(NerdDinner._points[0].Latitude.toString());
        $("#Longitude").val(NerdDinner._points[0].Longitude.toString());
    }
}

NerdDinner.FindDinnersGivenLocation = function (where) {
    NerdDinner._map.Find("", where, null, null, null, null, null, false,
                         null, null, NerdDinner._callbackUpdateMapDinners);
}


NerdDinner.FindMostPopularDinners = function (limit) {
    $.post("/Search/GetMostPopularDinners", { "limit": limit }, NerdDinner._renderDinners, "json");
}

NerdDinner._callbackUpdateMapDinners = function (layer, resultsArray, places, hasMore, VEErrorMessage) {
    var center = NerdDinner._map.GetCenter();

    $.post("/Search/SearchByLocation",
           { latitude: center.Latitude, longitude: center.Longitude },
           NerdDinner._renderDinners,
           "json");
}


NerdDinner._renderDinners = function (dinners) {
    $("#dinnerList").empty();

    NerdDinner.ClearMap();

    $.each(dinners, function (i, dinner) {

        var LL = new VELatLong(dinner.Latitude, dinner.Longitude, 0, null);

        // Add Pin to Map
        NerdDinner.LoadPin(LL, _getDinnerLinkHTML(dinner), _getDinnerDescriptionHTML(dinner));

        //Add a dinner to the <ul> dinnerList on the right
        $('#dinnerList').append($('<li/>')
                        .attr("class", "dinnerItem")
                        .append(_getDinnerLinkHTML(dinner))
                        .append($('<br/>'))
                        .append(_getDinnerDate(dinner, "mmm d"))
                        .append(" with " + _getRSVPMessage(dinner.RSVPCount)));
    });

    // Adjust zoom to display all the pins we just added.
    if (NerdDinner._points.length > 1) {
        NerdDinner._map.SetMapView(NerdDinner._points);
    }

    // Display the event's pin-bubble on hover.
    $(".dinnerItem").each(function (i, dinner) {
        $(dinner).hover(
            function () { NerdDinner._map.ShowInfoBox(NerdDinner._shapes[i]); },
            function () { NerdDinner._map.HideInfoBox(NerdDinner._shapes[i]); }
        );
    });

    function _getDinnerDate(dinner, formatStr) {
        return '<strong>' + _dateDeserialize(dinner.EventDate).format(formatStr) + '</strong>';
    }

    function _getDinnerLinkHTML(dinner) {
        return '<a href="' + dinner.Url + '">' + dinner.Title + '</a>';
    }

    function _getDinnerDescriptionHTML(dinner) {
        return '<p>' + _getDinnerDate(dinner, "mmmm d, yyyy") + '</p><p>' + dinner.Description + '</p>' + _getRSVPMessage(dinner.RSVPCount);
    }

    function _dateDeserialize(dateStr) {
        return eval('new' + dateStr.replace(/\//g, ' '));
    }


    function _getRSVPMessage(RSVPCount) {
        var rsvpMessage = "" + RSVPCount + " RSVP";

        if (RSVPCount > 1)
            rsvpMessage += "s";

        return rsvpMessage;
    }
}

NerdDinner.dragShape = null;
NerdDinner.dragPixel = null;

NerdDinner.EnableMapMouseClickCallback = function () {
    NerdDinner._map.AttachEvent("onmousedown", NerdDinner.onMouseDown);
    NerdDinner._map.AttachEvent("onmouseup", NerdDinner.onMouseUp);
    NerdDinner._map.AttachEvent("onmousemove", NerdDinner.onMouseMove);
}

NerdDinner.onMouseDown = function (e) {
    if (e.elementID != null) {
        NerdDinner.dragShape = NerdDinner._map.GetShapeByID(e.elementID);
        return true;
    }
}

NerdDinner.onMouseUp = function (e) {
    if (NerdDinner.dragShape != null) {
        var x = e.mapX;
        var y = e.mapY;
        NerdDinner.dragPixel = new VEPixel(x, y);
        var LatLong = NerdDinner._map.PixelToLatLong(NerdDinner.dragPixel);
        $("#Latitude").val(LatLong.Latitude.toString());
        $("#Longitude").val(LatLong.Longitude.toString());
        NerdDinner.dragShape = null;

        NerdDinner._map.FindLocations(LatLong, NerdDinner.getLocationResults);
    }
}

NerdDinner.onMouseMove = function (e) {
    if (NerdDinner.dragShape != null) {
        var x = e.mapX;
        var y = e.mapY;
        NerdDinner.dragPixel = new VEPixel(x, y);
        var LatLong = NerdDinner._map.PixelToLatLong(NerdDinner.dragPixel);
        NerdDinner.dragShape.SetPoints(LatLong);
        return true;
    }
}

NerdDinner.getLocationResults = function (locations) {
    if (locations) {
        var currentAddress = $("#Dinner_Address").val();
        if (locations[0].Name != currentAddress) {
            var answer = confirm("Bing Maps returned the address '" + locations[0].Name + "' for the pin location. Click 'OK' to use this address for the event, or 'Cancel' to use the current address of '" + currentAddress + "'");
            if (answer) {
                $("#Dinner_Address").val(locations[0].Name);
            }
        }
    }
}

函数NerdDinner（）{}
NerdDinner.MapDivId='theMap'；
NerdDinner.\u map=null；
NerdDinner._点=[]；
NerdDinner._形状=[]；
NerdDinner.LoadMap=函数（纬度、经度、加载时）{
NerdDinner.\u map=新的VEMap（NerdDinner.MapDivId）；
var options=新的VEMapOptions（）；
options.EnableBirdseye=false
//使控制栏不那么突出。
此._map.SetDashboardSize（VEDashboardSize.Small）；
如果（加载时！=null）
NerdDinner.\u map.onLoadMap=未加载；
if（纬度！=null和经度！=null）{
var中心=新的VELatLong（纬度、经度）；
}
NerdDinner.\u map.LoadMap（中心、空、空、空、空、空、空、选项）；
}
NerdDinner.ClearMap=函数（）{
NerdDinner._map.Clear（）；
NerdDinner._点=[]；
NerdDinner._形状=[]；
}
NerdDinner.LoadPin=函数（LL、名称、描述）{
var shape=新的VEShape（VEShapeType.Pushpin，LL）；
//制作一个带有标题和描述的漂亮图钉形状
SetTitle（“+escape（name）+”）；
如果（说明！==未定义）{
SetDescription（“
”+转义（description）+“
”；
}
NerdDinner.\u map.AddShape（形状）；
NerdDinner.点推（LL）；
NerdDinner.\u shapes.push（shape）；
}
NerdDinner.FindAddressOnMap=函数（其中）{
var numberOfResults=1；
var setBestMapView=true；
var showResults=true；
var DEFAULT消歧=真；
NerdDinner.\u map.Find（“），其中，null，null，null，
numberOfResults、showResults、true、Default消歧、，
setBestMapView，NerdDinner._callbackForLocation）；
}
NerdDinner.\u callbackForLocation=函数（层、结果数组、位置、hasMore、VEErrorMessage）{
NerdDinner.ClearMap（）；
if（places==null）{
NerdDinner._地图显示消息（VEErrorMessage）；
返回；
}
//为我们找到的每个地方做一个图钉
$。每个（位置、功能（i、项目）{
var description=“”；
如果（item.Description！==未定义）{
描述=项目。描述；
}
var LL=新高度（item.LatLong.Latitude，
经度）；
NerdDinner.LoadPin（LL，项目名称，描述）；
});
//确保所有的图钉都可见
如果（NerdDinner.\u points.length>1）{
内丁纳