0

我正在尝试从用于输出方向的地图上的 XML 文件加载标记。基本上，它是 Google 文档页面上的两个演示的组合。

路线：https ://google-developers.appspot.com/maps/documentation/javascript/examples/directions-panel

XML： http: //gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/downloadurl_info.html

我首先创建了路线图，然后尝试添加包含标记的 XML 文件。

我可能犯了一个简单的错误，但由于我不擅长 js 和编码，所以找不到什么。没有显示错误，只有一个空白页。

这是我当前的代码：

<script>
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(41.850033, -87.6500523)
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));
    var control = document.getElementById('control');
    control.style.display = 'block';
    map.controls[google.maps.ControlPosition.TOP].push(control);
  }   
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  downloadUrl("http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/moredata.xml", function(data) {
  var markers = data.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
    var marker = createMarker(markers[i].getAttribute("name"), latlng);
   }
 });

  function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

这是（非工作）jsFiddle：http: //jsfiddle.net/ajJ3u/

4

1 回答 1

1

快速回顾的问题：

  1. 您正在创建地图两次。
  2. 您没有 createMarker 功能。如果该调用来自其中一个示例，则您错过了将其带到新地图的机会。
  3. downloadUrl 受跨域安全限制。如果您的页面没有在“http://gmaps-samples-v3.googlecode.com”域中运行，它将无法运行。您需要从与页面运行所在的域相同的域访问 xml，或者使用代理。

来自/到来自 xml 的标记的方向示例（从 Mike Williams 的 v2 教程翻译为 v3

于 2012-10-09T00:28:27.993 回答