0
Ich versuche, von Bing Maps v7 auf v8 zu migrieren, und es ist ein Fehler aufgetreten. Es ist seltsam, weil sich der Fehler leicht ändert, wenn ich async vs synchron versuche. Ich habe StackOverFlow und Google durchforstet, aber ich kann es nicht scheinen.Fehler beim Versuch, von Version 7 auf Bing Maps v8 zu migrieren
Wenn ich async versuchen, die Fehler, die ich bekommen ist:
Uncaught ReferenceError: Microsoft is not defined
Wenn ich synchron versuchen, die Fehler, die ich bekommen ist:
Uncaught TypeError: cannot read property 'road' of undefined
Wie viele andere, die ich anhand gefunden habe, Ich habe den Bing-Entwickler verwendet und der Code funktioniert gut, keine Probleme. Auf meiner Website, nicht so sehr. Unsere Website ist Asp.net MVC basiert.
Ich habe irgendwo eine Seite gefunden, die darauf hinweist, dass ich den folgenden Code in den Kopfbereich geschrieben habe und das habe ich auch gemacht.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Nichts, was ich tue, scheint zu funktionieren. Hier ist mein Code auf die Karte beziehen:
<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);
};
Ich habe gerade versucht, fast die ganze Seite zu kommentieren, um zu sehen, ob ich etwas bekommen könnte zu zeigen, und ich immer noch die gleichen Fehlermeldungen. Offensichtlich fehlt mir etwas als Referenz, aber ich kann es nicht herausfinden. Danke im Voraus.
Hier ist der komplette cshtml Dateicode, wenn das hilft:
@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>