如何在Google地图中使用指导API从XML文件加载标记 [英] How to load markers from XML file with directions API in Google Maps

问题描述

我试图从用于输出路线的地图上的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和编码不太好，找不到。没有错误显示，只有一个空白页。

这是我目前的代码：

 <脚本> 
 var directionDisplay; 
 var directionsService = new google.maps.DirectionsService（）; 
函数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，函数（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）; 
} 
}）; 
 
函数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/

解决方案

快速查看问题：

1. 您正在创建地图两次。
   
2. 有一个createMarker函数。如果该呼叫来自其中一个示例，那么您错过了将其带到新地图。


3. downloadUrl受到跨域安全限制。如果您的网页未在http://gmaps-samples-v3.googlecode.com网域中投放，则无法运行。您需要从页面运行或使用代理的同一个域访问xml。
//www.geocodezip.com/v3_MW_example_map4c.htmlrel =nofollow>来自xml标记的指示示例（从Mike Williams的v2教程转化为v3）



I'm trying to load markers from XML file on a map used for outputing directions. Basically, it's the combination of two demos found on Google's documentation pages.

Directions: https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-panel

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

I have first created the directions map and then tried to add XML file that contains markers.

I'm probably making a simple mistake, but since I'm not good with js and coding, can't find what. There are no errors displayed, only a blank page.

Here is my current code:

<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>

Here is the (non-working) jsFiddle: http://jsfiddle.net/ajJ3u/

解决方案

Problems from a quick review:

1. you are creating the map twice.
2. you don't have a createMarker function. If that call came from one of the examples, you missed bringing it to the new map.
3. downloadUrl is subject to a cross-domain security restriction. If your page is not running in the "http://gmaps-samples-v3.googlecode.com" domain, it won't work. You need to access xml from the same domain as the page is running in or use a proxy.

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

这篇关于如何在Google地图中使用指导API从XML文件加载标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！