2012-11-09 5 views
10

Google Maps API로 거리를 강조 표시 할 수 있습니까?
내가이 효과에 가깝다는 것을 알 수있는 유일한 것은 그 위에 줄을 그리는 것이 었습니다. 그러나 이것은 많은 작업과 부정확합니다. 선들은 또한 지명을 지나칠 것입니다.

내가 원했던 것은 a에서 b 지점으로 탐색하는 것처럼 특정 streetnames를 강조 표시하는 것입니다. 예를 들어 10 개의 거리가 streetwers로 폐쇄되는 경우 해당 거리를 강조 표시 할 수 있습니다.Google지도 API를 사용하면 특정 거리를 강조 표시 할 수 있습니까?

+1

http://stackoverflow.com/questions/2155032/highlighting-whole-street-with-some-maps-api '' 특히이 링크를보세요. http://econym.org.uk/gmap /example_snappath.htm – C5H8NNaO4

+1

이러한 예는 Google Maps API v2입니다. v3에도 동일한 개념이 적용되지만 OP가 원하지 않는 거리를 가로 지르는 선이 그려져 있습니다. – geocodezip

+0

오, 미안, 내가 대답을 받아 들일 줄 몰랐어. 그러나 주제를 계속 지켜라. 누구든지 해결책을 알고 있습니까? 나는 사람들이 전에이 문제를 가지고 있었다고 상상할 수있다. 그러나 어쩌면 그럴 수도 없습니다. – user1081577

답변

14

지도 API 길 찾기 렌더러를 사용하면 실제로이를 매우 쉽게 수행 할 수 있습니다.
거리의 시작점과 끝점의 위도/경도 좌표를 제공해야하며 렌더러는 계산과 페인팅을 모두 수행합니다. 방향 단계를 읽고 직접 폴리선을 그릴 필요는 없습니다!

여기에 직접보기 :
http://jsfiddle.net/HG7SV/15/

이 코드이며, 모든 마법이 함수 초기화()에서 수행됩니다 : 당신의 거리 곡선과

<html> 
    <head> 
     <style type="text/css"> 
      html { height: 100% } 
      body { height: 100%; margin: 0px; padding: 0px } 
      #map_canvas { height: 100% } 
     </style> 
     <script type="text/javascript" 
      src="http://maps.google.com/maps/api/js?sensor=false"> 
     </script> 
     <script type="text/javascript"> 
      function initialize() { 
       // init map 
       var myOptions = { 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

       // init directions service 
       var dirService = new google.maps.DirectionsService(); 
       var dirRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true}); 
       dirRenderer.setMap(map); 

       // highlight a street 
       var request = { 
        origin: "48.1252,11.5407", 
        destination: "48.13376,11.5535", 
        travelMode: google.maps.TravelMode.DRIVING 
       }; 
       dirService.route(request, function(result, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         dirRenderer.setDirections(result); 
        } 
       }); 
      } 
     </script> 
    </head> 
    <body onload="initialize()"> 
     <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html> 

경우 렌더링이를 찾아야한다 당신이 의도하지 않은 바로 가기 인 경우, 중간 웨이 포인트를 추가하여 그려진 선을 원하는 거리에 정확히 놓으면 쉽게 수정할 수 있습니다 :

   var request = { 
        origin: "48.1252,11.5407", 
        destination: "48.13376,11.5535", 
        waypoints: [{location:"48.12449,11.5536"}, {location:"48.12515,11.5569"}], 
        travelMode: google.maps.TravelMode.DRIVING 
       }; 
+0

당신의 답변을위한 Thx! 이처럼 여러 경로를 그릴 수 있습니까? jsFiddle에서 두 번째 경로를 그으면 첫 번째 경로가 사라집니다. – user1081577

+0

Oke 내가 그린 각 경로에 대해 새 directionService 개체를 추가해야한다는 것을 알았습니다. 이게 충고 할 수 있니? [새로운 피들에 링크하십시오.] (http://jsfiddle.net/FX2ag/) (일부 복사 붙여 넣기 작업은 루프를 만드는 것이 더 나을 것입니다) – user1081577

+0

[다중 경로 및 채색에 대한 추가 정보] (http://stackoverflow.com)/questions/8304875/using-google-maps-3-api-to-get-multiple-routes-on-a-map) – user1081577

관련 문제