2013-12-14 68 views
0

我正在使用Google Places API標記兩個地點之間的路線。它對大多數路線都很好。但是,它不是爲少數路線標記路線。這是因爲「directionsService.route」請求正在爲某些路由返回「ZERO_RESULTS」狀態。下面是它不工作的輸入之一。Google Places API不標記某些地方的路線

源A:

South End Circle, Basavanagudi, Bangalore, Karnataka, India 

目的地B:

Jayanagar 4 Block, Jayanagar, Bangalore, Karnataka, India 

中間點C:

Tata Silk Farm, Jayanagar, Bangalore, Karnataka, India 

下面是代碼:

<html> 
<head> 
<style type="text/css"> 
       body { 
         font-family: sans-serif; 
         font-size: 14px; 
       } 
</style> 
     <title>Google Maps JavaScript API v3 Example: Places Autocomplete</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 

     <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places,geometry" type="text/javascript"></script> 

     <script type="text/javascript"> 
      var locations = new Array(); 
      var directionsDisplay; 
      var directionsService = new google.maps.DirectionsService(); 

      function initialize1() { 
       directionsDisplay = new google.maps.DirectionsRenderer(); 
       var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
       var mapOptions = { 
        zoom: 7, 
        center: chicago 
       } 
       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
       directionsDisplay.setMap(map); 
      } 

      function initialize() { 
       //routeBoxer = new RouteBoxer(); 

       var input = document.getElementById('searchTextFieldSource'); 
       var input1 = document.getElementById('searchTextFieldDestination'); 
       var input3 = document.getElementById('searchTextFieldIntermediate'); 

       var autocomplete = new google.maps.places.Autocomplete(input); 
       var autocomplete1 = new google.maps.places.Autocomplete(input1); 
       var autocomplete3 = new google.maps.places.Autocomplete(input3); 
       google.maps.event.addListener(autocomplete3, 'place_changed', function() { 
        var place1 = autocomplete.getPlace(); 
        document.getElementById('city1').value = place1.name; 
        var place1Lat = place1.geometry.location.lat(); 
        var place1Lng = place1.geometry.location.lng(); 
        document.getElementById('cityLat1').value = place1Lat; 
        document.getElementById('cityLng1').value = place1Lng; 

        var obj = new Object(); 
        obj.city = place1.name; 
        obj.latitude = place1.geometry.location.lat(); 
        obj.longitude = place1.geometry.location.lng(); 
        locations.push(obj); 


        var place2 = autocomplete1.getPlace(); 
        document.getElementById('city2').value = place2.name; 
        var place2Lat = place2.geometry.location.lat(); 
        var place2Lng = place2.geometry.location.lng(); 
        document.getElementById('cityLat2').value = place2Lat; 
        document.getElementById('cityLng2').value = place2Lng; 

        var obj = new Object(); 
        obj.city = place2.name; 
        obj.latitude = place2.geometry.location.lat(); 
        obj.longitude = place2.geometry.location.lng(); 
        locations.push(obj); 

        //For intermediate point 
        var place3 = autocomplete3.getPlace(); 
        document.getElementById('city3').value = place1.name; 
        var place3Lat = place3.geometry.location.lat(); 
        var place3Lng = place3.geometry.location.lng(); 
        document.getElementById('cityLat3').value = place3Lat; 
        document.getElementById('cityLng3').value = place3Lng; 

        directionsDisplay = new google.maps.DirectionsRenderer(); 
        var startPlace = new google.maps.LatLng(place1Lat, place1Lng); 

        var mapOptions = { 
         zoom: 7, 
         center: startPlace 
        } 

        var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
        directionsDisplay.setMap(map); 

        var start = $("#city1").val(); 
        var end = $("#city2").val(); 

        var request = { 
         origin: start, 
         destination: end, 
         travelMode: google.maps.TravelMode.DRIVING 
        }; 

        var position = new google.maps.LatLng(place3Lat, place3Lng); 

        directionsService.route(request, function (result, status) { 
         if (status == google.maps.DirectionsStatus.OK) { 
          directionsDisplay.setDirections(result); 

          if (google.maps.geometry.poly.isLocationOnEdge(position, 
           new google.maps.Polyline({ path: google.maps.geometry.encoding.decodePath(result.routes[0].overview_polyline.points) }), 
           0.0050000000)) { 
           alert("within polyline"); 
          } 
          else { 
           alert("not in polyline"); 
          } 

          // Box around the overview path of the first route 
          /*var path = result.routes[0].overview_path; 
          boxes = routeBoxer.box(path, 0.25); 
          drawBoxes(); 
          findPlaces(0);*/ 
         } 
        }); 
       }); 
      } 
      google.maps.event.addDomListener(window, 'load', initialize); 

      function refreshMap(locations) { 
       google.maps.visualRefresh = true; 
       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 10, 
        center: new google.maps.LatLng(locations[0].latitude, locations[0].longitude), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 

       var infowindow = new google.maps.InfoWindow(); 
       var marker, i; 

       for (i = 0; i < locations.length; i++) { 
        marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude), 
         map: map 
        }); 

        google.maps.event.addListener(marker, 'click', (function (marker, i) { 
         return function() { 
          infowindow.setContent(locations[i].city); 
          infowindow.open(map, marker); 
         } 
        })(marker, i)); 
       } 


      } 
     </script> 
     <body> 
      <div> 
        <b>Source A:</b><input id="searchTextFieldSource" type="text" size="50" placeholder="Enter the source" autocomplete="on" runat="server" /> 
        <input type="text" id="city1" name="city1" /> 
        <input type="text" id="cityLat1" name="cityLat1" /> 
        <input type="text" id="cityLng1" name="cityLng1" /> 
      </div> 

      <div> 
        <b>Destination B:</b><input id="searchTextFieldDestination" type="text" size="50" placeholder="Enter the destination" autocomplete="on" runat="server" /> 
        <input type="text" id="city2" name="city2" /> 
        <input type="text" id="cityLat2" name="cityLat2" /> 
        <input type="text" id="cityLng2" name="cityLng2" /> 
      </div> 

      <div> 
        <b>Intermediate point C:</b><input id="searchTextFieldIntermediate" type="text" size="50" placeholder="Enter the destination" autocomplete="on" runat="server" /> 
        <input type="text" id="city3" name="city2" /> 
        <input type="text" id="cityLat3" name="cityLat3" /> 
        <input type="text" id="cityLng3" name="cityLng3" /> 
      </div> 

      <div id="map" style="width: 700px; height: 600px;"></div> 
     </body> 
</html> 

下面是我所得到的,當我給上述地區的快照: places api problem

它並不標誌着路線。可能是什麼問題呢?

+0

有什麼問題嗎? –

+0

這些位置給了我一個結果。 – geocodezip

+0

@geocodezip我已經更新了快照和完整代碼的問題。對於我在問題中給出的路線,它仍然沒有標記路線(對我來說)。 –

回答

1
var start = $("#city1").val(); is "South End Circle" 
var end = $("#city2").val(); is "Jayanagar 4 Block" 

directions服務無法在這兩個位置之間找到方向。

也許你應該使用:

var start = place1.formatted_address; 
var end = place2.formatted_address; 

其中規定,你的問題表明你提供的路線服務的formatted_addresses:

  • 南末端圓,Basavanagudi,班加羅爾,印度卡納塔克邦
  • Jayanagar 4 Block,Jayanagar,Bangalore,Karnataka,印度
  • 塔塔絲綢農場,Jayanagar,班加羅爾,卡納塔克邦,I ndia

另一種選擇是使用位置的座標而不是格式化的地址。