Google Maps V3 Polyline加载失败 [英] Google Maps V3 Polyline loading fails

查看：473
本文介绍了Google Maps V3 Polyline加载失败的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要Google Maps Polyline帮助

我刚刚下载了这段代码（只是一个简单的地图），它工作得很好。
我已经注册了一个google API。




$ b 

 <！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/> 
< style type =text / css> 
 html {height：100％} 
 body {height：100％;保证金：0; padding：0} 
 #map_canvas {height：100％} 
< / style> 
 
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false> 
< / script> 
< script type =text / javascript> 
函数initialize（）{
 var myOptions = {
 center：new google.maps.LatLng（-34.397,150.644），
 zoom：8，
 mapTypeId： google.maps.MapTypeId.ROADMAP 
}; 
 var map = new google.maps.Map（document.getElementById（map_canvas），
 myOptions）; 
} 
< / script> 
< / head> 
 
< body onload =initialize（）> 
< div id =map_canvasstyle =width：100％; height：100％>< / div> 
< / body> 
< / html>

但是这个不能从我的电脑上运行??



任何理由，请帮助
$ b 

 <！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/> 
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/> 
< title> Google Maps JavaScript API v3示例：Polyline Simple< / title> 
< link href =/ maps / documentation / javascript / examples / default.css =stylesheettype =text / css/> 
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false>< / script> ; 
< script type =text / javascript> 
 
函数initialize（）{
 var myLatLng = new google.maps.LatLng（0，-180）; 
 var myOptions = {
 zoom：3，
 center：myLatLng，
 mapTypeId：google.maps.MapTypeId.TERRAIN 
}; 
 
 var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 
 var flightPlanCoordinates = [
 new google.maps.LatLng（37.772323，-122.214897），
 new google.maps.LatLng（21.291982，-157.821856），
 new google.maps.LatLng（-18.142599,178.431），
 new google.maps.LatLng（-27.46758,153.027892）
]; 
 var flightPath = new google.maps.Polyline（{
 path：flightPlanCoordinates，
 strokeColor：＃FF0000，
 strokeOpacity：1.0，
 strokeWeight：2 
}）; 
 
 flightPath.setMap（map）; 
} 
 
< / script> 
< / head> 
< body onload =initialize（）> 
< div id =map_canvas>< / div> 
< / body> 
 
< / html>

调试（当它正常工作时）：

< pre class =lang-none prettyprint-override> [12：46：00.874] file：/// C：/Users/Haile/Desktop/polyoverflow.html
[12:46 ：00.974] GET https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false [HTTP / 1.1 200 OK 6738ms]
-
[12 ：46：07.779] GET https://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/11/main.js [HTTP / 1.1 304 Not Modified 667ms]
[12:46 ：08.622]解析'背景'的值时出错。声明下降了。 @ file：/// C：/Users/Haile/Desktop/polyoverflow.html
[12：46：08.718] GET https://maps.gstatic.com/mapfiles/openhand_8_8.cur [HTTP / 1.1 304未修改4200毫秒]
[12：46：08.744] GET https://maps.gstatic.com/mapfiles/transparent.png [HTTP / 1.1 304 Not Modified 6536ms]
[12：46：08.776 ] GET https://maps.gstatic.com/mapfiles/undo_poly.png [HTTP / 1.1 304 Not Modified 2389ms]
[12：46：08.792] GET https://mts1.googleapis.com/vt？ lyrs = t @ 128，r @ 177000000& src = apiv3& hl = en-US& x = 7& y = 3& z = 3& s =& style = api％7Csmartmaps [HTTP / 1.1 200 OK 3746ms] b $ b [12：46：08.808] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=zh-CN&x=7&y=4& ; z = 3& s = G& style = api％7Csmartmaps [HTTP / 1.1 200 OK 8703ms]
[12：46：08.826] GET https://mts0.googleapis.com/vt?lyrs=t@ 128，r @ 177000000& src = apiv3& hl = en-US& x = 0& y = 3& z = 3& s = Gal&style = api％7Csmartmaps [HTTP / 1.1 200 OK 7659ms] 12：46：08.845] GET https://mts0.googleapis.com/vt?lyr s = t @ 128，r @ 177000000& src = apiv3& hl = en-US& x = 0& y = 4& z = 3& s = Gali& style = api％7Csmartmaps [HTTP / 1.1 200 OK 8420ms] b $ b [12：46：08.863] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=zh-CN&x=6&y=3& ; z = 3& s = Galil& style = api％7Csmartmaps [HTTP / 1.1 200 OK 16613ms]
[12：46：08.890] GET https://mts0.googleapis.com/vt?lyrs=t@ 128，r @ 177000000& src = apiv3& hl = en-US& x = 6& y = 4& z = 3& s = Galile&style = api％7Csmartmaps [HTTP / 1.1 200 OK 12093ms]
[ 12：46：08.914] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=zh-CN&x=1&y=3&z=3& ; s = Galile& style = api％7Csmartmaps [HTTP / 1.1 200 OK 19585ms]
[12：46：08.939] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@ 177000000& src = apiv3& hl = en-US& x = 1& y = 4& z = 3& s = Galileo& style = api％7Csmartmaps [HTTP / 1.1 200 OK 2753ms]
[12:46： 08.963] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3& amp; hl = en-US& x = 5& y = 3& z = 3& s = Ga& style = api％7Csmartmaps [HTTP / 1.1 200 OK 12625ms]
[12：46：08.988] ：//mts1.googleapis.com/vt lyrs = T @ 128，R @ 1.77亿&安培; SRC = apiv3&安培; HL =的en-US&安培; X = 5&安培; Y = 4和; Z = 3&安培; S =半乳糖&安培;式= API ％7Csmartmaps [HTTP / 1.1 200 OK 9987ms]
[12：46：09.014] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl= zh-CN& x = 2& y = 3& z = 3& s = G& style = api％7Csmartmaps [HTTP / 1.1 200 OK 8728ms]
[12：46：09.047] GET https：// mts0 .googleapis.com / vt？lyrs = t @ 128，r @ 177000000& src = apiv3& hl = en-US& x = 2& y = 4& z = 3& s = Ga& style = api％7Csmartmaps [HTTP /1.1 200 OK 2984ms]
[12：46：09.078] GET https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d-67.60159243714006&2d-180& ; 2m2& 1d67.60159243714006& 2d180& 2u3& 4sen-US& 5e4& 6sr％40177000000& 7b0& 8e0& 9b0& callback = _xdc _._ q07umg& token = 24170 [HTTP / 1.1 200 OK 10083ms]
[12：46：09.294] GET https://maps.gstatic.com/mapfiles/google_white.png [HTTP / 1.1 304 Not Modified 2013ms]
[12：46：09.329] GET https：// maps。 gstatic.com/mapfiles/mv/imgs8.png [HTTP / 1.1 304 Not Modified 2413ms]
[12：46：09.367] GET https://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003。 png [HTTP / 1.1 304 Not Modified 3958ms]
[12：46：09.404] GET https://maps.gstatic.com/mapfiles/rotate2.png [HTTP / 1.1 304 Not Modified 2713ms]
[12：46：09.441] GET https://maps.gstatic.com/mapfiles/szc4.png [HTTP / 1.1 304 Not Modified 7609ms]
[12：46：10.190] GET https：// maps。 googleapis.com/maps/gen_204?ev=api_viewport&cad=src:apiv3,ts:1336902369211 [HTTP / 1.0 200连接建立25338毫秒]
[12：46：12.591] GET https：//maps.googleapis。 com / maps / gen_204？ev = api_ads& cad = src：apiv3，ads：0 [HTTP / 1.1 204 No Content 2181ms]
[12：46：13.461] GET https://maps.googleapis.com/地图/ API / JS / AuthenticationService.Authenticate？1sfile％3A％2F％2F％2FC％3A％2FUsers％2FHaile％2FDesktop％2 Fpolyoverflow.html& 4sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ-grp9B1Y& 5e1& callback = _xdc _._ q8yv43& token = 112869 [HTTP / 1.0 200连接建立12274ms]
-
[12：46：20.489] GET https：/ /maps.googleapis.com/maps/gen_204?ev=api_marker&cad=src:apiv3,m:2,d:0,s:0 [HTTP / 1.1 204 No Content 660ms]
-
[12：46：29.340] GET https://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot&rt=jl.737,mc.784,mb.871,vt.20582 ，prt.20582，plt.20535，mt.20583& size = 1366x246& maptype = r [HTTP / 1.1 204 No Content 7383ms]
-
[12：46：38.478] GET https：/ /maps.googleapis.com/maps/api/js/QuotaService.RecordEvent?1sfile%3A%2F%2F%2FC%3A%2FUsers%2FHaile%2FDesktop%2Fpolyoverflow.html&3sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&4e1&5e0&6u1& 7s5x64nd& callback = _xdc _._ 9r0xgo& token = 4472 [HTTP / 1.1 200 OK 697ms]


解决方案

您已包含Google的CSS。拿出来并定义你自己的，和你的工作例子类似。您可能需要身高：100％;宽度：100％，而不仅仅是设置高度。



  function initialize（）{var myLatLng = new google.maps.LatLng（0，-180）; var myOptions = {zoom：3，center：myLatLng，mapTypeId：google.maps.MapTypeId.TERRAIN}; var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; var flightPlanCoordinates = [new google.maps.LatLng（37.772323，-122.214897），new google.maps.LatLng（21.291982，-157.821856），new google.maps.LatLng（-18.142599,178.431），new google.maps.LatLng（ -27.46758,153.027892）]; var flightPath = new google.maps.Polyline（{path：flightPlanCoordinates，strokeColor：＃FF0000，strokeOpacity：1.0，strokeWeight：2}）; flightPath.setMap（map）;} initialize（）;

html {height：100％;宽度：100％}身体{身高：100％;宽度：100％;保证金：0; padding：0} #map_canvas {height：100％; width：100％} 

 < script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y>< / script>< div id =map_canvas>< / div> ;


I need help with Google Maps Polyline

I just downloaded this code ( just a simple map) and it works just fine . I have signed up for a google API .

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>

      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
    </script>
  </head>

  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

But this one does not work on from my computer ??

Any reason why , Please help 

<!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"/>
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false"></script>
<script type="text/javascript">

  function initialize() {
    var myLatLng = new google.maps.LatLng(0, -180);
    var myOptions = {
      zoom: 3,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var flightPlanCoordinates = [
        new google.maps.LatLng(37.772323, -122.214897),
        new google.maps.LatLng(21.291982, -157.821856),
        new google.maps.LatLng(-18.142599, 178.431),
        new google.maps.LatLng(-27.46758, 153.027892)
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

   flightPath.setMap(map);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>

Debug(when it works fine ) :

[12:46:00.874] file:///C:/Users/Haile/Desktop/polyoverflow.html
[12:46:00.974] GET https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false [HTTP/1.1 200 OK 6738ms]
--
[12:46:07.779] GET https://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/11/main.js [HTTP/1.1 304 Not Modified 667ms]
[12:46:08.622] Error in parsing value for 'background'.  Declaration dropped. @ file:///C:/Users/Haile/Desktop/polyoverflow.html
[12:46:08.718] GET https://maps.gstatic.com/mapfiles/openhand_8_8.cur [HTTP/1.1 304 Not Modified 4200ms]
[12:46:08.744] GET https://maps.gstatic.com/mapfiles/transparent.png [HTTP/1.1 304 Not Modified 6536ms]
[12:46:08.776] GET https://maps.gstatic.com/mapfiles/undo_poly.png [HTTP/1.1 304 Not Modified 2389ms]
[12:46:08.792] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=7&y=3&z=3&s=&style=api%7Csmartmaps [HTTP/1.1 200 OK 3746ms]
[12:46:08.808] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=7&y=4&z=3&s=G&style=api%7Csmartmaps [HTTP/1.1 200 OK 8703ms]
[12:46:08.826] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=0&y=3&z=3&s=Gal&style=api%7Csmartmaps [HTTP/1.1 200 OK 7659ms]
[12:46:08.845] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=0&y=4&z=3&s=Gali&style=api%7Csmartmaps [HTTP/1.1 200 OK 8420ms]
[12:46:08.863] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=6&y=3&z=3&s=Galil&style=api%7Csmartmaps [HTTP/1.1 200 OK 16613ms]
[12:46:08.890] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=6&y=4&z=3&s=Galile&style=api%7Csmartmaps [HTTP/1.1 200 OK 12093ms]
[12:46:08.914] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=1&y=3&z=3&s=Galile&style=api%7Csmartmaps [HTTP/1.1 200 OK 19585ms]
[12:46:08.939] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=1&y=4&z=3&s=Galileo&style=api%7Csmartmaps [HTTP/1.1 200 OK 2753ms]
[12:46:08.963] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=5&y=3&z=3&s=Ga&style=api%7Csmartmaps [HTTP/1.1 200 OK 12625ms]
[12:46:08.988] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=5&y=4&z=3&s=Gal&style=api%7Csmartmaps [HTTP/1.1 200 OK 9987ms]
[12:46:09.014] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=2&y=3&z=3&s=G&style=api%7Csmartmaps [HTTP/1.1 200 OK 8728ms]
[12:46:09.047] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=2&y=4&z=3&s=Ga&style=api%7Csmartmaps [HTTP/1.1 200 OK 2984ms]
[12:46:09.078] GET https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d-67.60159243714006&2d-180&2m2&1d67.60159243714006&2d180&2u3&4sen-US&5e4&6sr%40177000000&7b0&8e0&9b0&callback=_xdc_._q07umg&token=24170 [HTTP/1.1 200 OK 10083ms]
[12:46:09.294] GET https://maps.gstatic.com/mapfiles/google_white.png [HTTP/1.1 304 Not Modified 2013ms]
[12:46:09.329] GET https://maps.gstatic.com/mapfiles/mv/imgs8.png [HTTP/1.1 304 Not Modified 2413ms]
[12:46:09.367] GET https://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png [HTTP/1.1 304 Not Modified 3958ms]
[12:46:09.404] GET https://maps.gstatic.com/mapfiles/rotate2.png [HTTP/1.1 304 Not Modified 2713ms]
[12:46:09.441] GET https://maps.gstatic.com/mapfiles/szc4.png [HTTP/1.1 304 Not Modified 7609ms]
[12:46:10.190] GET https://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=src:apiv3,ts:1336902369211 [HTTP/1.0 200 Connection established 25338ms]
[12:46:12.591] GET https://maps.googleapis.com/maps/gen_204?ev=api_ads&cad=src:apiv3,ads:0 [HTTP/1.1 204 No Content 2181ms]
[12:46:13.461] GET https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1sfile%3A%2F%2F%2FC%3A%2FUsers%2FHaile%2FDesktop%2Fpolyoverflow.html&4sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&5e1&callback=_xdc_._q8yv43&token=112869 [HTTP/1.0 200 Connection established 12274ms]
--
[12:46:20.489] GET https://maps.googleapis.com/maps/gen_204?ev=api_marker&cad=src:apiv3,m:2,d:0,s:0 [HTTP/1.1 204 No Content 660ms]
--
[12:46:29.340] GET https://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot&rt=jl.737,mc.784,mb.871,vt.20582,prt.20582,plt.20535,mt.20583&size=1366x246&maptype=r [HTTP/1.1 204 No Content 7383ms]
--
[12:46:38.478] GET https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent?1sfile%3A%2F%2F%2FC%3A%2FUsers%2FHaile%2FDesktop%2Fpolyoverflow.html&3sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&4e1&5e0&6u1&7s5x64nd&callback=_xdc_._9r0xgo&token=4472 [HTTP/1.1 200 OK 697ms]

解决方案

You have included Google's CSS. Take that out and define your own, similar to your working example. You may need height:100%; width:100% though, instead of just setting the height.

function initialize() {
    var myLatLng = new google.maps.LatLng(0, -180);
    var myOptions = {
        zoom: 3,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var flightPlanCoordinates = [
        new google.maps.LatLng(37.772323, -122.214897),
        new google.maps.LatLng(21.291982, -157.821856),
        new google.maps.LatLng(-18.142599, 178.431),
        new google.maps.LatLng(-27.46758, 153.027892)
    ];
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

   flightPath.setMap(map);
}
initialize();

html { height: 100% ; width: 100%}
      body { height: 100%; width:100%; margin: 0; padding: 0 }
      #map_canvas { height: 100%; width:100% }

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y"></script>
<div id="map_canvas"></div>

这篇关于Google Maps V3 Polyline加载失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆