代码可以在http://jsfiddle.net上工作，但不能在http://liveweave.com上工作

code works on http://jsfiddle.net but not working on http://liveweave.com

本文关键字：工作 http com 但不能 liveweave jsfiddle 代码 net      更新时间：2023-09-26

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

jsfiddle中的工作代码如下所示:

JSFIDDLE

LIVEWEAVE

这是我的代码

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

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

不要把initialize();放在脚本的末尾，把这个函数添加到body tags的onload属性中。

<body onload="initialize();">

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

相关文章：