Question

我有一个谷歌地图应用程序，它在谷歌地图中绘制一条线路径，该代码在http://jsfiddle.net中完美运行，但似乎不适用于http://liveweave.com

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>

Answer 1

这是因为脚本的执行方式。 Jsfiddle设置onDomready设置，因此它将在dom加载时执行javascript。我在liveweave中没有看到类似的选项。

而不是在脚本末尾放置initialize();，而是将函数添加到body标签onload属性中。

<body onload="initialize();">

示例：http://liveweave.com/Dj5fSM

代码适用于http://jsfiddle.net但不适用于http://liveweave.com

1 个答案: