2011-12-21 6 views
0

인코딩 된 경로를 디코딩하고이 디코딩 된 경로를 사용하여 Google지도에 폴리 라인을 그립니다. 그러나 어떤 이유로 든 선이 그려지지 않습니다. 어떤 생각이 언제 잘못 되었습니까? 북한 캠브리지, MA :지도에 윤곽선이 표시되지 않음

JS 코드

encoded_path = 'axwaGtbcqL`[email protected][[email protected][email protected]|@{@[email protected]{@DIjAuA|@[email protected]}@~AeB\[LZxAjDJINM|[email protected]@[email protected]@[email protected][email protected]@`[email protected]@hFaAbM_AfJ]jDAlA{[email protected]@[email protected]`[email protected]|[email protected]_GmFcJaM}@[email protected]}[email protected][email protected][[email protected]@][email protected]@[email protected]@][email protected]@[email protected]@[email protected][email protected]][email protected][[email protected]@M][email protected]@M]IOGKQSGIIG}@[email protected]{AgAiAaAWSUOWOQIMEKCICOGMCKEQC_DuA?GbByB\[email protected][email protected]@bBkBnBcBzCqC`[email protected]^[email protected]'; 

decoded_path = google.maps.geometry.encoding.decodePath(encoded_path); 

console.log(decoded_path); 

var polyOptions = { 
      strokeColor: "#970E04" , 
      strokeOpacity: 1.0 , 
      strokeWeight: 2 , 
      path: decoded_path , 
      clickable: false, 
      map: map 
    } 
polyline = new google.maps.Polyline(polyOptions); 

추가 정보

다음 코드는 폴리 라인이 그려해야하는 위치에 대한 초기지도보기를 설정합니다. 맵은 <body onload="initialize();">에서 초기화되므로 폴리 라인을 그리기 전에 맵을 초기화해야합니다. 사실이 아닙니다!

function initialize() { 
    var center_latlng = new google.maps.LatLng(42.39902115,-71.12902832); 
    var options = { 
     zoom: 13, 
     minZoom: 11, 
     maxZoom: 19, 
     center: center_latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), options); 
} 

추가 정보 # 2

아래를 참조하십시오 내가 클릭에 폴리 라인을 생성하는 버튼을 만들었습니다. 이 방법으로지도가 초기화 된 후 폴리선이 만들어 졌는지 확인할 수 있습니다. 이 버튼을 클릭하면 폴리 라인이 나타납니다!지도가 초기화 된 후 폴리선로드를 만들려면 어떻게해야합니까?

$(function() { 

    $("#button").click(function() { 
     polyline.setPath(decoded_path); 
     polyline.setMap(map); 
    }); 

}); 

답변

0

에 한번 사용 google.maps.event.addDomListener, 예를 들어,

<html> 
<head> 
    ... 
    <script type="text/javascript"> 
     /** 
      * Called on the intiial page load. 
     */ 
     function init() { 
      var map = new google.maps.Map(document.getElementById('map'), { 
       ... 
      }); 
      ... 
      var line = new google.maps.Polyline({ 
       ... 
       map: map 
      }); 
     } 
     // Register an event listener to fire once when the page finishes loading. 
     google.maps.event.addDomListener(window, 'load', init); 
    </script> 
</head> 
<body> 
    <div id="map"></div> 
</body>