google haritalarda iki işaretçi arasında bir rota çizme

Question

Merhaba javascript kullanarak iki işaretçi arasında bir yol haritası çizmeye çalışıyorum. İnternette bulunan çeşitli örnekleri denedim ancak farklı örnekler denerken haritam yüklenmiyor. Hatanın nedenini anlayamıyorum. Haritam sadece yüklenmiyor.

Aşağıdaki iki işaretçi için bir yol çizmeye çalışıyorum.

<script> 

     function mapLocation() { 
      var directionsDisplay; 
      var directionsService = new google.maps.DirectionsService(); 
      var map; 

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

      function calcRoute() { 
       var start = new google.maps.LatLng(37.334818, -121.884886); 
       var end = new google.maps.LatLng(38.334818, -181.884886); 
       var request = { 
        origin: start, 
        destination: end, 
        travelMode: google.maps.TravelMode.DRIVING 
       }; 
       directionsService.route(request, function (response, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         directionsDisplay.setDirections(response); 
        } 
       }); 
      }    

      google.maps.event.addDomListener(window, 'load', initialize); 
     } 
     mapLocation(); 
    </script> 

Birisi iki işaretçi arasında bir yol çizmeme yardım edebilir mi?

Answer 1

İki yorumlar:

1. soru işaretlerinin arasındaki yol tarifleri hakkında sorar, ancak deftere kodu hiçbir belirteçler vardır. LatLng nesneleri tarafından tanımlanan iki konum vardır. Yol tarifi servisi, rotanın başlangıcında ve sonundaki işaretleri otomatik olarak ekleyecektir. İki işaretçi arasında yol tarifi almak istiyorsanız, önce haritanıza eklemeniz gerekir.
2. Gönderilen kodda calcRoute çağrısı yok (Çalıştırılmasına neden olan bir "route" butonu ekledim).

Sorunlar:

1. tarifi hizmet hiçbir rota çizilir, orijinal puan için ZERO_RESULTS dönüyor. Bunu görmek için if (status == "OK") testi için başka bir durumda hata işleme ekleyin. Aslında yönlendirilebilir bir yere noktaları (Palo Alto, CA) değiştirirseniz tarifi hizmet "map" özelliğini ayarlayın çünkü hiç
2. , yön servis yolu oluşturulmakta olan değil

working fiddle

function mapLocation() { 
    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function initialize() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var chicago = new google.maps.LatLng(37.334818, -121.884886); 
     var mapOptions = { 
      zoom: 7, 
      center: chicago 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     directionsDisplay.setMap(map); 
     google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); 
    } 

    function calcRoute() { 
     var start = new google.maps.LatLng(37.334818, -121.884886); 
     //var end = new google.maps.LatLng(38.334818, -181.884886); 
     var end = new google.maps.LatLng(37.441883, -122.143019); 
     var bounds = new google.maps.LatLngBounds(); 
     bounds.extend(start); 
     bounds.extend(end); 
     map.fitBounds(bounds); 
     var request = { 
      origin: start, 
      destination: end, 
      travelMode: google.maps.TravelMode.DRIVING 
     }; 
     directionsService.route(request, function (response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
       directionsDisplay.setMap(map); 
      } else { 
       alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); 
      } 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
} 
mapLocation(); 

çalışma kod parçacığı:

function mapLocation() { 
 
    var directionsDisplay; 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var map; 
 

 
    function initialize() { 
 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    var chicago = new google.maps.LatLng(37.334818, -121.884886); 
 
    var mapOptions = { 
 
     zoom: 7, 
 
     center: chicago 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    directionsDisplay.setMap(map); 
 
    google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); 
 
    } 
 

 
    function calcRoute() { 
 
    var start = new google.maps.LatLng(37.334818, -121.884886); 
 
    //var end = new google.maps.LatLng(38.334818, -181.884886); 
 
    var end = new google.maps.LatLng(37.441883, -122.143019); 
 
    var request = { 
 
     origin: start, 
 
     destination: end, 
 
     travelMode: google.maps.TravelMode.DRIVING 
 
    }; 
 
    directionsService.route(request, function(response, status) { 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     directionsDisplay.setMap(map); 
 
     } else { 
 
     alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); 
 
     } 
 
    }); 
 
    } 
 

 
    google.maps.event.addDomListener(window, 'load', initialize); 
 
} 
 
mapLocation();

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="button" id="routebtn" value="route" /> 
 
<div id="map-canvas"></div>

Answer 2

Birkaç hata. Birincisi coğrafi konum. İkinci konumunuz yanlıştır, çünkü boylam yalnızca +180'den -180'e kadar olabilir, yani dünyada -181 yoktur! İkinci olarak, MrUpsidedown yorumda belirtildiği gibi, bir işlev içinde bir işlevi çağırıyorsunuz. Öncelikle coğrafi konumunuzu düzeltin ve ardından işlev çağrılarınızı düzeltin, bu da yaşadığınız sorunları düzeltmelidir.