2014-05-19 2 views
0

Google지도에서 여러 위치 간의 경로를 보여주는 코드가 있습니다. 폴리 라인을 사용하고 있습니다. 그러나 목적지로 돌아 오는 경로의 경우 '까마귀가 날아 오르는 것처럼'표시됩니다. Google API 키를 사용하고 있지 않습니다. 내가 있어야합니까? 내가하는 경우 어떻게 사용합니까? 이것이 문제의 원인이 될 수 있습니까? 나는 제안 된 링크에서 답변을 시도했지만 항상 작동하지는 않습니다.Google지도의 여러 위치간에 도로를 표시합니다.

나는 이것이 PHP를 사용하여 여러 위치를 그려야하는 상당히 일반적인 질문 일 것이라고 생각했을 것입니다. 나는 잠시 동안 그 일을 해왔고 해결책을 찾지 못했습니다. 까마귀가 날아가는 길만 표시하는 것을 중지하려면 어떻게해야합니까? 내가 가진 코드는 다음과 같습니다

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
     var map = null; 
    var infowindow = new google.maps.InfoWindow(); 
    var bounds = new google.maps.LatLngBounds(); 
     var markers = [ 

     <?php 
       // loop through the rows of data 
       if(have_rows('tour_site', $ID)): 

       $info_places = array(); 
        $info_all_places = array();     
        while(have_rows('tour_site', $ID)) : the_row(); 
        //display a sub field value 
         $name = get_sub_field('name'); 
         $long = get_sub_field('long'); 
         $lat = get_sub_field('lat'); 
         $info_places = array("name" => $name, "long"=>$long, "lat"=>$lat); 
         $info_all_places = array($info_places); 
         foreach ($info_all_places as $info) { 
         ?> 
         { 
          "title": <?php echo "'" . $info['name'] . "'"; ?>, 
          "lat": <?php echo "'" . $info['lat'] . "'"; ?>, 
          "lng": <?php echo "'" . $info['long'] . "'"; ?>, 
         }, 
         <?php 
         } 
       endwhile; 
       else : 
       endif; 
      ?> 


      { 
       "title": 'XXX', 
       "lat": 'XXX', 
       "lng": 'XXX', 
      } 
    ]; 
    </script> 

<!-- <script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&amp;up_fromLocation=xxx&amp;up_myLocations=<?php echo $destination; ?>&amp;up_defaultDirectionsType=&amp;up_autoExpand=&amp;synd=open&amp;w=320&amp;h=55&amp;title=Directions+by+Google+Maps&amp;lang=en&amp;country=US&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script> --> 
<script type="text/javascript"> 

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(
      parseFloat(markers[0].lat), 
      parseFloat(markers[0].lng)), 
     zoom:15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var path = new google.maps.MVCArray(); 
    var service = new google.maps.DirectionsService(); 

    var infoWindow = new google.maps.InfoWindow(); 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    var poly = new google.maps.Polyline({ 
     map: map, 
     strokeColor: '#F3443C' 
    }); 
    var lat_lng = new Array(); 

    var marker = new google.maps.Marker({ 
        position:map.getCenter(), 
        map:map, 
     title:markers[0].title 
       }); 
    bounds.extend(marker.getPosition()); 
    google.maps.event.addListener(marker, "click", function(evt) { 
     infowindow.setContent(this.get('title')); 
     infowindow.open(map,marker); 
    }); 
    for (var i = 0; i < markers.length; i++) { 
     if ((i + 1) < markers.length) { 
      var src = new google.maps.LatLng(parseFloat(markers[i].lat), 
              parseFloat(markers[i].lng)); 
      var smarker = new google.maps.Marker({position:des, 
             map:map, 
             title:markers[i].title 
            }); 

google.maps.event.addListener(smarker, "click", function(evt) { 
    infowindow.setContent(this.get('title')); 
    infowindow.open(map,this); 
});  
      var des = new google.maps.LatLng(parseFloat(markers[i+1].lat), 
              parseFloat(markers[i+1].lng)); 
var dmarker = new google.maps.Marker({position:des, 
             map:map, 
             title:markers[i+1].title 
            }); 
bounds.extend(dmarker.getPosition()); 
google.maps.event.addListener(dmarker, "click", function(evt) { 
    infowindow.setContent(this.get('title')); 
    infowindow.open(map,this); 
});    
      service.route({ 
       origin: src, 
       destination: des, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }, function (result, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
         path.push(result.routes[0].overview_path[i]); 
        } 
        poly.setPath(path); 
        map.fitBounds(bounds); 
       } 
      }); 
     } 
    } 
} 
google.maps.event.addDomListener(window,'load',initialize); 
    </script> 

     <div id="dvMap" style="width: 600px; height: 450px"> </div> 

enter image description here

+0

제안 된 링크로 문제가 해결되지 않습니다. – LTech

+0

멋진 답변으로이 문제를 완전히 해결할 수 있습니다. http://stackoverflow.com/questions/3404499/plotting-a-route-on-google-maps – LTech

답변

0

가 반환 된 상태 매개 변수 google.maps.DirectionsStatus을 확인합니다. 문제의 징후를 줄 수 있습니다.

OVER_QUERY_LIMIT가 표시되면 길 찾기 서비스 호출 사이에 지연 시간을 설정하거나 최대 10 개의 웨이 포인트가 포함 된 배열로 한 번만 호출해야합니다.

자세히 알아보기 here.

관련 문제