Question

我正在尝试从用于输出路线的地图上的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/

Answer 1

快速审核中的问题：

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

Example of directions from/to markers from xml (translated to v3 from Mike Williams' v2 tutorial

如何在Google地图中使用路线API从XML文件加载标记

1 个答案: