0
Bing Maps v7에서 v8로 이전하려고하는데 오류가 발생했습니다. 비동기식 또는 비동기식으로 시도하면 오류가 약간 변경되므로 이상합니다. 나는 StackOverFlow와 구글을 샅샅이 뒤지지 만,이 문제를 해결할 수는 없다. 내가 비동기하려고하면v7에서 Bing Maps v8로 이전하는 동안 오류가 발생했습니다.
는, 내가 오류는 다음과 같습니다
Uncaught ReferenceError: Microsoft is not defined
나는 기적하려고하면, 내가 오류는 다음과 같습니다
내가 참조를 발견했습니다 다른 많은 사람들과 마찬가지로Uncaught TypeError: cannot read property 'road' of undefined
, Bing 개발자의 시력을 사용했으며 코드가 문제없이 작동합니다. 내 사이트에,별로. 우리 사이트는 Asp.net MVC 기반입니다.
어딘가에 머리 부분에 다음 코드를 넣으라고 제안했는데 그 부분도했습니다.
<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>