0

我正在创建一个 wp8 应用程序，我正在使用这个 html 代码来显示 2 个图钉和它们之间的方向，但问题是方向显示没有地图（在模拟器上，html 页面都显示没有问题）。

有我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Amex</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

  var rendererOptions = {
  draggable: false
  };
  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
  var directionsService = new google.maps.DirectionsService();
  var map;

  var ksa = new google.maps.LatLng(24.7116667, 46.7241667);

  function initialize() {

  var myOptions = {
  zoom: 7,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: ksa
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  computeTotalDistance(directionsDisplay.directions);
  });

  calcRoute();
  }

  function calcRoute() {

  var request = {
  origin: new google.maps.LatLng(23.7116667, 45.7241667),
  destination: new google.maps.LatLng(20.7116667, 45.7241667),
  travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
  }
  });
  }

  function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (i = 0; i < myroute.legs.length; i++) {
      total += myroute.legs[i].distance.value;
    }
    total = total / 1000.
    document.getElementById("total").innerHTML = total + " km";
  }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:80%"></div>
<div id="directionsPanel" style="width:100%;height 20%;font-family:arial">
<p>Total Distance: <span id="total"></span></p>

</div>
</body>

</div>
</body>
</html>
4

1 回答 1

0

我找到了解决方案只需要更换这个

<div id="map_canvas" style="width:100%; height:80%"></div>

这样

<div id="map_canvas" style="width:300px; height:480px"></div>
于 2013-10-03T12:37:59.020 回答