자바 스크립트, 같은 페이지에 여러 개의 Google지도 (길 찾기 렌더러가 예외로 작동하지 않음)

웹 페이지에 반복적으로 생성 된 여러 개의 Google지도가 있습니다. 그리고 각지도에 길 찾기를 표시하기 위해 Google 길 찾기 API를 사용하고 있습니다. 문제는이 코드가 마지막지도의 모든 방향을 표시하고 있다는 것입니다. 의견이 있으십니까? :자바 스크립트, 같은 페이지에 여러 개의 Google지도 (길 찾기 렌더러가 예외로 작동하지 않음)

var currentPosition = new google.maps.LatLng(44.462691,26.1215866); 
var directionsService = new google.maps.DirectionsService(); 

function DisplayLocations(){ 
    $("#mapsContainer").empty(); 
    for(var i=0;i<locationsDisplayed;i++){ 
    var location=locationsArray[i]; 
     $("#mapsContainer"+i).append('<div id="ImageMap'+i+'" style="width=250px;height:200px;"></div>'); 

    var myOptions = { 
     zoom: 14, 
     center: currentPosition, 
     draggable: false, 
     zoomControl: false, 
     scrollwheel: false, 
     disableDoubleClickZoom: false, 
     disableDefaultUI: true 
    }; 

    var map = new google.maps.Map(document.getElementById('ImageMap'+i),myOptions); 

    var request = { 
     origin: currentPosition, 
     destination: location.position, 
     travelMode: google.maps.TravelMode.WALKING 
    }; 

    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
     RenderDirection(map,response); 
     } 
    }); 
    } 
} 

function RenderDirection(map,result) { 
     var directionsRenderer = new google.maps.DirectionsRenderer(); 
     directionsRenderer.setMap(map); 
     directionsRenderer.setDirections(result); 
}

출처

2014-11-18 Moraru Alex

예, 길 찾기 서비스가 루프에서 덮어 씁니다. 할 수있는 일은 요청을 연결하는 것입니다. 따라서 응답이 반환 될 때마다 다음 요청을 트리거합니다.

<html> 
<head> 
    <title>Javascript, multiple google maps on same page(Directions Renderer is not working as excepted)</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script> 
    var maps = [];  // we will copy (the reference to) every map to this array, so we can always access them at will 
    var locationsArray = [ 
    {position: new google.maps.LatLng(44.460, 26.120) }, 
    {position: new google.maps.LatLng(44.461, 26.121) }, 
    {position: new google.maps.LatLng(44.462, 26.122) }, 
    {position: new google.maps.LatLng(44.463, 26.123) } 
    ] 
    var currentPosition = new google.maps.LatLng(44.462691, 26.1215866); 
    function DisplayLocations() { 
    $("#mapsContainer").empty(); 
    nextLocation(0); // we don't use a for-loop; we wait for a response to trigger the next request 
    function nextLocation(i) { 
     var directionsService = new google.maps.DirectionsService(); 
     var directionsDisplay = new google.maps.DirectionsRenderer(); 
     var location=locationsArray[i]; 
     $("#mapsContainer"+i).append('<div id="ImageMap'+i+'" style="width=250px;height:200px;"></div>'); 
     var myOptions = { 
     zoom: 14, 
     center: currentPosition, 
     draggable: false, 
     zoomControl: false, 
     scrollwheel: false, 
     disableDoubleClickZoom: false, 
     disableDefaultUI: true 
     }; 
     var map = new google.maps.Map(document.getElementById('ImageMap'+i), myOptions); 
     maps.push(map); 
     var request = { 
     origin: currentPosition, 
     destination: location.position, 
     travelMode: google.maps.TravelMode.WALKING 
     }; 
     directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      RenderDirection(maps[i++], response, directionsDisplay); 
      // if there is a next location, we will fire a new request 
      if (locationsArray[i]) { 
      nextLocation(i); 
      } 
     } 
     }); 
    } 
    } 
    function RenderDirection(map, response, directionsDisplay) { 
    directionsDisplay.setMap(map); 
    directionsDisplay.setDirections(response); 
    } 
    google.maps.event.addDomListener(window, 'load', DisplayLocations); 
    </script> 
    <style> 
    .map { 
     height: 210px; 
     width: 260px; 
     float: left; 
     margin: 2px; 
    } 
    </style> 
</head> 
<body> 
    <div class="map" id="mapsContainer0"></div> 
    <div class="map" id="mapsContainer1"></div> 
    <div class="map" id="mapsContainer2"></div> 
    <div class="map" id="mapsContainer3"></div> 
</body>

출처

2014-11-19 11:13:00

자바 스크립트, 같은 페이지에 여러 개의 Google지도 (길 찾기 렌더러가 예외로 작동하지 않음)

답변

관련 문제