我正在使用Bing map ajax控件。在我的代码中,我有以下内容 -
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('mnMap'), {
credentials: 'MyKey',
mapTypeId: Microsoft.Maps.MapTypeId.road
});
map.setView({
zoom: 4,
center: new Microsoft.Maps.Location(defaultLat, defaultLan)
});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', {
callback: createDirectionsManager
});
}
function createDirectionsManager()
{
if (!directionsManager)
{
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
}
directionsManager.resetDirections();
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsPanel') });
directionsErrorEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', displayRouteError );
directionsUpdatedEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', displayUpdatedRoute );
}
function displayUpdatedRoute(status){
// update waypoint text inputs based on dragged markers
var legs = directionsManager.getAllWaypoints();
// Do some validation
}
function displayRouteError(error){
// If the error is a viapoint error, display an error
if (error.responseCode == Microsoft.Maps.Directions.RouteResponseCode.noSolution){
directionsManager.resetDirections();
}else if (error.responseCode == Microsoft.Maps.Directions.RouteResponseCode.dataSourceNotFound || error.responseCode == Microsoft.Maps.Directions.RouteResponseCode.tooFar){
directionsManager.resetDirections();
}else{
directionsManager.resetDirections();
}
}
function getDirections(submit, send) {
directionsManager.resetDirections();
if (some test condition) {
start = new Microsoft.Maps.Directions.Waypoint({ location: new Microsoft.Maps.Location(locInputs.first().attr("data-lat"), locInputs.first().attr("data-lng")) });
} else {
start = new Microsoft.Maps.Directions.Waypoint({ address: locInputs.first().val() });
}
directionsManager.addWaypoint(start); // waypoint values come from UI based on user input string address
directionsManager.addWaypoint(waypoint);
directionsManager.addWaypoint(end);
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsPanel') });
directionsManager.calculateDirections();
}
function saveTrip(){
var legs = directionsManager.getAllWaypoints();
// do some validations
//ajax call to backend
}
$("#saveTripBtn").click(function() {
getDirections();
saveTrip();
}
getMap()已正确初始化,我可以看到正确显示的方向。在directionsManager.getAllWaypoints()返回的航路点中,没有一个航路点在其中有位置对象 - 因此我没有得到纬度/经度。在调用后端代码之前,我需要的是savetrip()方法中每个路点的纬度/长度,我没有看到。
我现在使用的是开发人员密钥。如果我需要提供更多信息,请告诉我。
提前致谢
罗斯汉
答案 0 :(得分:0)
使用Waypoint对象上的getLocation方法获取它的位置坐标:http://msdn.microsoft.com/en-us/library/hh312838.aspx
这是一个有效的代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map, directionsManager;
function GetMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'YOUR_BING_MAPS_KEY'
});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', {
callback: getDirections
});
}
function getDirections() {
if (!directionsManager)
{
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
}
directionsManager.resetDirections();
var start = new Microsoft.Maps.Directions.Waypoint({ address: "Seattle, WA" });
var end = new Microsoft.Maps.Directions.Waypoint({ address: "Portland, OR" });
directionsManager.addWaypoint(start);
directionsManager.addWaypoint(end);
directionsManager.calculateDirections();
}
function getWaypoints(){
var wp = directionsManager.getAllWaypoints();
var text = '';
for(var i=0;i<wp.length;i++){
var loc = wp[i].getLocation();
text += 'waypoint ' + i + ': ' + loc.latitude + ', ' + loc.longitude + '\r\n';
}
document.getElementById('output').innerText = text;
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style=";width:600px;height:400px;"></div><br/>
<input type="button" onclick="getWaypoints()" value="Get Waypoints" /><br/>
<div id="output"></div>
</body>
</html>