0

私は NerdDinner チュートリアルです。各ディナーの地理情報を表示するマップをアップロードしたいと考えています。「Map」という JS ファイルを定義しました。そして「地図」の部分図。次に、DinnerForm ビューで "Map" 部分ビューをレンダリングします。しかし、プロジェクトを実行すると、マップが表示されませんでした。そして、次のエラーが表示されました：

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

1 に答える 1