Question

我尝试从Bing Maps v7迁移到v8，但我遇到了错误。它很奇怪，因为如果我尝试异步vs同步，错误会略有改变。我已经搜索过StackOverFlow和Google，但似乎无法解决这个问题。

如果我尝试异步，我得到的错误是：

未捕获的ReferenceError：未定义Microsoft

如果我尝试同步，我得到的错误是：

未捕获的TypeError：无法读取属性＆＃39; road＆＃39;未定义的

像我找到的许多其他人一样，我使用了Bing开发人员的视线，代码工作得很好，没问题。在我的网站上，没有那么多。我们的网站是以Asp.net MVC为基础的。

我在某个地方发现了一个页面，建议我将以下代码放在head部分中，我也做了。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

我所做的一切似乎都无法奏效。这是我的地图相关代码：

<div style="float:left" id='myMap'></div>

<script type="text/javascript" src='https://www.bing.com/api/maps/mapcontrol?callback=getMap' async defer></script>
    function getMap() {
        var mapOptions = { credentials: 'MY ACCESS KEY',
            height: 600,
            width: 650,
            mapTypeId: Microsoft.Maps.MapTypeId.Road,
            showMapTypeSelector: true,
            enableClickableLogo: false,
            enableSearchLogo: false
        };
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), mapOptions);
    };

我已经尝试评论几乎整个页面只是为了看看我是否能够显示某些内容并且仍然会收到相同的错误消息。很明显，我错过了一些可供参考的东西，但似乎无法弄明白。提前致谢。

如果有帮助，请填写完整的cshtml文件代码：

 @model EspexWeb.Models.JobMapInformation
@using EspexWeb.Models
@{
    ViewBag.Title = "Map Information";
}
<div class="pagebanner">Job Map</div>
@if (AccessHelper.IsMember("Administrators,Sales,Contact_Admin,Jobsite_Super"))
{
    <div style="float:left; cursor: pointer;" data-bind="click: saveLocation"><img title="Save changes." src="@Url.Content("~/Content/images/save.png")" alt="Save" /></div>
}
<div style="float:left; cursor: pointer;" data-bind="click: printdiv, visible: tabID() == 'ui-id-2'"><img title="Print Route." src="@Url.Content("~/Content/images/print_48.png")" alt="Print" /></div>
<div style="float:left; cursor: pointer;" data-bind="click: findLocation, visible: tabID() == 'ui-id-1'"><img title="Find Location." src="@Url.Content("~/Content/images/find_location_48.png")" alt="Find" /></div>
<div style="float:left; cursor: pointer;" data-bind="click: getDirections, visible: tabID() == 'ui-id-2'"><img title="Map Route." src="@Url.Content("~/Content/images/route_48.png")" alt="Route" /></div>
<div style="float:left; margin-left:40px">
        <span class="label3">Job Number:</span><span class="value3 spanlink" data-bind="click: backToJob">@Model.JobNumber</span><span style="margin-left:25px" class="label3">Job Name:</span><span class="value3 spanlink" data-bind="click: backToJob">@Model.JobName</span>
</div>
@if (ViewBag.ReturnUrl != null)
{
        <div data-bind="click: backToValidation" style="float:right; cursor: pointer"><img title="Click here to return to Validation." src="@Url.Content("~/Content/images/Validate_48.png")" alt="Validation" /></div>
}
<div class="clear"></div>
<div id="errorMessages" class="validation-summary-errors"></div>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1"><span>Address</span></a></li>
        <li><a href="#tabs-1"><span>Directions</span></a></li>
    </ul>
    <div id="tabs-1">
        <div style="float:left; margin-right:10px; width:220px; min-height: 100px;">
        <div class="busyindicator"></div>
        <form id="findlocation" action="">
            <div id="address">
                <div id="location">
                    <div>Street</div>
                    <input id='street' name='street' style="width:200px" data-bind="value: street" />
                    <div>City</div>
                    <input id='city' name='city' style="width:200px" data-bind="value: city" />
                    <div>State</div>
                    <input id='state' name='state' style="width:100px" data-bind="value: state" />
                    <div>Zip Code</div>
                    <input id='zipcode' style="width:100px" data-bind="value: zipcode" />
                    <div>County</div>
                    <input id='county' style="width:200px" data-bind="value: county" />
                    <div>Country</div>
                    <input id='country' style="width:200px" data-bind="value: country" />
                    <div>Longitude</div>
                    <input id='longitude' style="width:200px" readonly="readonly" data-bind="value: longitude" />
                    <div>Latitude</div>
                    <input id='latitude' style="width:200px; display: block;" readonly="readonly" data-bind="value: latitude" />

                </div>

                <div id="instructions" style="margin-top: 10px">
                    <div>Special Instructions</div>
                    <textarea id="specialinstructions" rows="10" cols="25" data-bind="value: specialInstructions"></textarea>
                </div> 

            </div>
        </form>
            <div id="directions" style="display: none">
                <div>Street</div>
                <input id='startstreet' style="width:200px" />
                <div>City</div>
                <input id='startcity' style="width:200px" />
                <div>State</div>
                <input id='startstate' style="width:100px" />

            </div>               
        </div>
        <div style="float:left" id='myMap'></div>
        <div class="clear"></div>
    </div>
</div>
<div id="output"></div>

<script type="text/javascript" src='https://www.bing.com/api/maps/mapcontrol?callback=getMap' async defer></script>

<script type="text/javascript">
    var map = null;
    var query;
    var start;
    var viewModel = {
        id: '@Model.ID',
        jobNumber: '@Model.JobNumber',
        jobName: '@Model.JobName',
        street: ko.observable('@Model.Street'),
        city: ko.observable('@Model.City'),
        county: ko.observable('@Model.County'),
        state: ko.observable('@Model.State'),
        country: ko.observable('@Model.Country'),
        zipcode: ko.observable('@Model.ZipCode'),
        longitude: ko.observable('@Model.Longitude'),
        latitude: ko.observable('@Model.Latitude'),
        specialInstructions: ko.observable(@(Html.Raw(Json.Encode(Model.SpecialInstructions)))),
        returnUrl: '@Html.Raw(ViewBag.ReturnUrl)',
        tabID: ko.observable(0)

    }
    viewModel.showDirections = function () {
        if ($("#directions").is(":hidden")) {
            $("#address").slideUp("slow", function () {
                $("#directions").slideDown("slow");
                });
        }
    };

    viewModel.showAddress = function () {
        if ($("#address").is(":hidden")) {
            $("#directions").slideUp("slow", function () {
                $("#address").slideDown("slow");
            });
        }
    };

    viewModel.getModelData = function() {
        var map = {
            ID: viewModel.id,
            JobNumber: viewModel.jobNumber,
            JobName: viewModel.jobName,
            Street: viewModel.street(), 
            City: viewModel.city(), 
            State: viewModel.state(),
            County: viewModel.county(),
            ZipCode: viewModel.zipcode(),
            Country: viewModel.country(),
            Longitude: viewModel.longitude(),
            Latitude: viewModel.latitude(),
            SpecialInstructions: viewModel.specialInstructions()};

        return ko.toJSON(map);
    };

    viewModel.backToJob = function () {
        location.href = '@Url.Content("~/JobInformation/JobDetail/?id=")' + viewModel.id;
    }

    viewModel.backToValidation = function () {
        location.href = viewModel.returnUrl;
    }

    viewModel.saveLocation = function () {
        //Display busy indicator to show user something is happening on the server
        $(".busyindicator").show();
        $.ajax({
            cache: false,
            url: '@Url.Content("~/JobInformation/SaveMap/")',
            data: viewModel.getModelData(),
            type: "post",
            contentType: "application/json",
            success: function (result) {
                //Allow the user to leave the page without warning
                window.onbeforeunload = null;
            },
            error: function (result) {
                alert("The server returned the error code: " + result.status + '\n' + "Message: " + result.statusText + '\n' + result.responseText);
            },
            complete: function () {
                $(".busyindicator").hide();
            }
        });
    };

    viewModel.updateInputScreen = function (tabid) {
        if (tabid === "ui-id-1") {
            viewModel.showAddress();
        }
        else {
            viewModel.showDirections();
        }
        viewModel.tabID(tabid);
    };

    function printdiv() {
        w = window.open();
        //Include the style sheets that format the map directions properly
        w.document.write('<link rel="stylesheet" type="text/css" rev="stylesheet" href="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/css/bin/7.0.2011100111334.47/en/mapDirections.css">');
        w.document.write('<link rel="stylesheet" type="text/css" rev="stylesheet" href="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/css/bin/7.0.2011100111334.47/en/mapdelay.css">');
        w.document.write('<link rel="stylesheet" type="text/css" rev="stylesheet" href="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/css/bin/7.0.2011100111334.47/en/mapcontrol.css">');
        w.document.write($('#jobinfo').html());
        w.document.write(viewModel.specialInstructions());
        w.document.write($('#output').html());
    };

    function getMap() {
        // Set the map and view options, setting the map style to Road and
        //    removing the user's ability to change the map style
        var mapOptions = { credentials: 'MY ACCESS KEY',
            height: 600,
            width: 650,
            mapTypeId: Microsoft.Maps.MapTypeId.Road,
            showMapTypeSelector: true,
            enableClickableLogo: false,
            enableSearchLogo: false
        };
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), mapOptions);

        if (viewModel.longitude().length == 0 || viewModel.longitude() == null) {
            getCurrentLocation();
        }
       else {
           setJobPushpinLocation();
        }

    };

    function setJobPushpinLocation() {
        var location = new Microsoft.Maps.Location(viewModel.latitude(), viewModel.longitude());
        var pushpinOptions = { draggable: true };
        var pushpin = new Microsoft.Maps.Pushpin(location, pushpinOptions);
        Microsoft.Maps.Events.addHandler(pushpin, 'dragend', endDragDetails); 
        map.entities.push(pushpin);
        map.setView({zoom: 15, center: location });
    }


    function getCurrentLocation() {
        var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
        geoLocationProvider.getCurrentPosition({ showAccuracyCircle: false });
    };

    function findLocation() {
        if ($("#findlocation").valid()) {
            var street = document.getElementById("street");
            var city = document.getElementById("city");
            var state = document.getElementById("state");

            query = street.value + ' ' + city.value + ', ' + state.value;
            deletePushpin();

            map.getCredentials(callSearchService);
            window.onbeforeunload = function () { return "You have changed the jobsite location. \r\n If you leave this page the changes will be lost."; };
        }
    };

    function getDirections() {
        var street = document.getElementById("startstreet");
        var city = document.getElementById("startcity");
        var state = document.getElementById("startstate");

        start = street.value + ' ' + city.value + ', ' + state.value;
        Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: directionsModuleLoaded });
    };


    function deletePushpin() {
        for (var i = map.entities.getLength() - 1; i >= 0; i--) {
            var pushpin = map.entities.get(i);
            if (pushpin instanceof Microsoft.Maps.Pushpin || pushpin instanceof Microsoft.Maps.Polyline) {
                map.entities.removeAt(i);
            };
        }
    };


    endDragDetails = function (e) {
        $(".busyindicator").show();
        var loc = e.entity.getLocation();
        viewModel.latitude(loc.latitude);
        viewModel.longitude(loc.longitude);
        map.getCredentials(getAddressByLongLat);
        window.onbeforeunload = function () { return "You have changed the jobsite location. \r\n If you leave this page the changes will be lost."; };
    };

    function getAddressByLongLat(credentials) {
        var loc = viewModel.latitude() + ',' + viewModel.longitude();
        var searchRequest = 'http://dev.virtualearth.net/REST/v1/Locations/' + loc + '?output=json&jsonp=addressByLongLatCallback&key=' + credentials;
        var mapscript = document.createElement('script');
        mapscript.type = 'text/javascript';
        mapscript.src = searchRequest;
        document.getElementById('myMap').appendChild(mapscript)
    };

    function addressByLongLatCallback(result) {
        var output = document.getElementById("output");
        if (output) {
            while (output.hasChildNodes()) {
                output.removeChild(output.lastChild);
            }
        }
        var resultsHeader = document.createElement("h5");
        output.appendChild(resultsHeader);

        if (result &&
          result.resourceSets &&
          result.resourceSets.length > 0 &&
          result.resourceSets[0].resources &&
          result.resourceSets[0].resources.length > 0) {

            resultsHeader.innerHTML = "Location Updated " + result.resourceSets[0].resources[0].name;

            var countyName = result.resourceSets[0].resources[0].address.adminDistrict2;
            if (countyName) {
                if (countyName.length !== 0) {
                    if (countyName.indexOf('Co.') > 0) {
                        countyName = countyName.substring(0, countyName.length - 4);
                    };
                };
            };

            viewModel.street(result.resourceSets[0].resources[0].address.addressLine);
            viewModel.city(result.resourceSets[0].resources[0].address.locality);
            viewModel.state(result.resourceSets[0].resources[0].address.adminDistrict);
            viewModel.county(countyName);
            viewModel.zipcode(result.resourceSets[0].resources[0].address.postalCode);
            viewModel.country(result.resourceSets[0].resources[0].address.countryRegion);                       
        }
        else {
            if (typeof (response) == 'undefined' || response == null) {
                alert("Invalid credentials or no response");
            }
            else {
                if (typeof (response) != 'undefined' && response && result && result.errorDetails) {
                    resultsHeader.innerHTML = "Message :" + response.errorDetails[0];
                }
                alert("No results for the query");

            }
        }
        $(".busyindicator").hide();
    }

    function callSearchService(credentials) {
        var searchRequest = 'http://dev.virtualearth.net/REST/v1/Locations/' + query + '?output=json&jsonp=searchServiceCallback&key=' + credentials;
        var mapscript = document.createElement('script');
        mapscript.type = 'text/javascript';
        mapscript.src = searchRequest;
        document.getElementById('myMap').appendChild(mapscript)
    };

    function searchServiceCallback(result) {
        var output = document.getElementById("output");
        if (output) {
            while (output.hasChildNodes()) {
                output.removeChild(output.lastChild);
            }
        }
        var resultsHeader = document.createElement("h5");
        output.appendChild(resultsHeader);

        if (result &&
          result.resourceSets &&
          result.resourceSets.length > 0 &&
          result.resourceSets[0].resources &&
          result.resourceSets[0].resources.length > 0) {
            resultsHeader.innerHTML = "Found location " + result.resourceSets[0].resources[0].name;
            var bbox = result.resourceSets[0].resources[0].bbox;
            var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
            map.setView({ bounds: viewBoundaries });
            var location = new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);
            var pushpinOptions = { draggable: true };
            var pushpin = new Microsoft.Maps.Pushpin(location, pushpinOptions);
            var pushpindragend = Microsoft.Maps.Events.addHandler(pushpin, 'dragend', endDragDetails); 
            map.entities.push(pushpin);


            var countyName = result.resourceSets[0].resources[0].address.adminDistrict2;
            if (countyName) {
                if (countyName.length !== 0) {
                    if (countyName.indexOf('Co.') > 0) {
                        countyName = countyName.substring(0, countyName.length - 4);
                    };
                };
            };

            viewModel.street(result.resourceSets[0].resources[0].address.addressLine);
            viewModel.city(result.resourceSets[0].resources[0].address.locality);
            viewModel.state(result.resourceSets[0].resources[0].address.adminDistrict);
            viewModel.county(countyName);
            viewModel.zipcode(result.resourceSets[0].resources[0].address.postalCode);
            viewModel.country(result.resourceSets[0].resources[0].address.countryRegion);   


            viewModel.latitude(location.latitude);
            viewModel.longitude(location.longitude);
        }
        else {
            if (typeof (response) == 'undefined' || response == null) {
                alert("Invalid credentials or no response");
            }
            else {
                if (typeof (response) != 'undefined' && response && result && result.errorDetails) {
                    resultsHeader.innerHTML = "Message :" + response.errorDetails[0];
                }
                alert("No results for the query");

            }
        }
    };

    function directionsModuleLoaded() {
        // Initialize the DirectionsManager
        directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

        var lat = document.getElementById("latitude");
        var long = document.getElementById("longitude");

        // Create start and end waypoints
        var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: start });
        var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ location: new Microsoft.Maps.Location(lat.value, long.value) });

        directionsManager.addWaypoint(startWaypoint);
        directionsManager.addWaypoint(endWaypoint);

        // Set request options
        directionsManager.setRequestOptions({ distanceUnit: Microsoft.Maps.Directions.DistanceUnit.miles, routeOptimization: Microsoft.Maps.Directions.RouteOptimization.shortestDistance });

        // Set the render options
        directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('output') });

        // Specify a handler for when an error occurs
        Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', displayError);

        // Calculate directions, which displays a route on the map
        directionsManager.calculateDirections();

    };

    function displayError(e) {
        // Display the error message
        alert(e.message);
    };



    ko.applyBindings(viewModel);

    $(document).ready(function () {
        $("#tabs").tabs({
            activate: function (event, ui) {
                viewModel.updateInputScreen(ui.newTab.context.id);
            }
        });
        $("#findlocation").validate(
        {
            errorLabelContainer: "#errorMessages",
            wrapper: "li",

            rules: {
                street: { required: true },
                city: { required: true },
                state: { required: true }
            },
            messages: {
                street: { required: "Street is required." },
                city: { required: "City is required." },
                state: { required: "State is required." }
            }

        });
        getMap();
    });

</script>

Answer 1

对于未来的任何人来说，我发现地图要发布的div需要有一个高度和宽度样式来定义它。

未定义Microsoft的异步方法的错误将继续发生，但地图有效。

这是奇怪的部分，直到我开始切换到v8才意识到这一点......这个错误也发生在第7版中。事实上，直到几天前，版本7仍在使用相同的代码。

Answer 2

几点：

加载地图的JavaScript不在脚本标记中。
您应该考虑将地图脚本标记移动到地图加载JavaScript下方，因为如果地图控件被缓存，它将在GetMap函数加载到页面之前触发回调。如果按下刷新按钮，通常会发生这种情况。
此外，mapTypeId应为Microsoft.Maps.MapTypeId。 road ，其中小“r”不是大写字母。
如果您有浮动样式，则必须指定宽度/高度，因为它们无法动态确定。
宽度/高度/ enableSearchLogo不是V8中的地图选项。这不会导致问题，只会被忽略，但您可以删除以简化代码。

尝试从v7迁移到Bing Maps v8时出错

2 个答案: