2011-12-21 30 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();">に初期化されるので、ポリラインを描画する前に、マップを初期化する必要があります。 NOT TRUE !!私はクリックでポリラインを作成するボタンを作成し

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

例えば、

<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> 

、google.maps.event.addDomListenerを使用して試してみてください