1

我有一个谷歌地图应用程序,它在谷歌地图中绘制一条线路径,该代码在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 回答