1

私はGoogleマップでラインパスを描画するGoogleマップアプリケーションを持っています.http://jsfiddle.netで完全に動作するコードですが、http ://liveweave.comでは動作していないようです.

jsfiddle の作業コードは次のとおりです。

JSFIDDLE

ライブウィーブ

これは私のコードです

<!DOCTYPE html>
<html>
    <head>

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
    #map_canvas {
    width:550px;
    height:400px;
}
</style>

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript"> 
       function initialize(){
       var center= new google.maps.LatLng(10.012552,76.327043);
       var myOptions = {
                zoom: 16,
                center: center,
                mapTypeControl: true,
                mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                navigationControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
       }     
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var polylineCoordinates = [
            new google.maps.LatLng(10.013566,76.331549),
            new google.maps.LatLng(10.013566,76.331463),
            new google.maps.LatLng(10.013503,76.331313),
            new google.maps.LatLng(10.013482,76.331205),
            new google.maps.LatLng(10.013419,76.330926),
            new google.maps.LatLng(10.013334,76.330712),
            new google.maps.LatLng(10.013313,76.330411),
            new google.maps.LatLng(10.013292,76.330175),
            new google.maps.LatLng(10.013228,76.329854),
            new google.maps.LatLng(10.013144,76.329553),
            new google.maps.LatLng(10.013059,76.329296),
            new google.maps.LatLng(10.012996,76.329017),
            new google.maps.LatLng(10.012869,76.328802),
            new google.maps.LatLng(10.012785,76.328545),
            new google.maps.LatLng(10.012700,76.328223),
            new google.maps.LatLng(10.012679,76.328030),
            new google.maps.LatLng(10.012658,76.327837),
            new google.maps.LatLng(10.012637,76.327600),
            new google.maps.LatLng(10.012573,76.327322),
            new google.maps.LatLng(10.012552,76.327043),
            new google.maps.LatLng(10.012552,76.326807),
            new google.maps.LatLng(10.012510,76.326613),
            new google.maps.LatLng(10.012447,76.326399),
            new google.maps.LatLng(10.012404,76.326227),
      ];

            marker = new google.maps.Marker({
            position: new google.maps.LatLng(10.012404,76.32622),
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 3.5,
                strokeColor: '#FF3300'   
            },
            draggable: true,
            map: map
            });          
      var polyline = new google.maps.Polyline({
          path: polylineCoordinates,
          strokeColor: '#5C5CE6',
          strokeOpacity: 2.0,
          strokeWeight: 5,
          editable: false
      });

      polyline.setMap(map);    

}
initialize();

        </script>
    </head>
    <body>
        <div id="map_canvas" ></div>
    </body>
</html>
4

1 に答える 1

3

これは、スクリプトの実行方法が原因です。JsfiddleにはonDomreadyが設定されているため、domがロードされたときにjavascriptが実行されます。liveweaveに同様のオプションは表示されません。

スクリプトの最後に配置する代わりにinitialize();、bodyタグのonload属性に関数を追加します。

<body onload="initialize();">

例： http： //liveweave.com/Dj5fSM

于 2013-03-21T12:52:44.053 に答える