asp.net - 从 ASP.Net 绘制谷歌地图

Question

我正在尝试从 ASP.NET 元素中绘制 map ，我找到了一个很好的教程 here. http://www.codeproject.com/Articles/175557/Plot-Path-using-Google-Maps-JavaScript-API

元素编译正常，但我仍然无法加载 map 。

在之前的帖子中，andrew 已经指出使用我自己的 css，这对我有用。

需要帮助。网站上提供了源代码:)。

调试 1:

[12:38:04.463] GET https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/8/11/%7Bcommon,map,util,poly,marker%7D.js [HTTP/1.0 200 Connection established 8766ms]
    --
    [12:38:13.234] GET http://localhost:1790/GPSPath/ [HTTP/1.1 200 OK 82ms]
    [12:38:13.340] GET http://code.google.com/apis/maps/documentation/javascript/examples/default.css [HTTP/1.0 301 Moved Permanently 1052ms]
    [12:38:13.356] GET https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false [HTTP/1.1 200 OK 8076ms]
    [12:38:14.396] GET https://developers.google.com/maps/documentation/javascript/examples/default.css?csw=1 [HTTP/1.1 301 Moved Permanently 1214ms]
    [12:38:15.615] GET https://developers.google.com/maps/documentation/javascript/examples/default.css [HTTP/1.1 200 OK 1478ms]
    --
    [12:38:21.473] GET https://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/11/main.js [HTTP/1.1 304 Not Modified 3708ms]
    --
    [12:38:31.415] GET https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/8/11/%7Bcommon,map,util,poly,marker%7D.js [HTTP/1.1 200 OK]

调试 2:

[13:07:12.368] GET https://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/11/main.js [HTTP/1.1 304 Not Modified 711ms]
[13:07:15.316] Error in parsing value for 'background'.  Declaration dropped. @ http://localhost:1790/GPSPath/
[13:07:15.413] GET https://maps.gstatic.com/mapfiles/openhand_8_8.cur [HTTP/1.1 304 Not Modified 669ms]
[13:07:15.433] GET https://maps.gstatic.com/mapfiles/transparent.png [HTTP/1.1 304 Not Modified 610ms]
[13:07:15.466] GET https://maps.gstatic.com/mapfiles/undo_poly.png [HTTP/1.1 304 Not Modified 615ms]
[13:07:15.481] GET https://mts1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=351&y=819&z=11&s=&style=api%7Csmartmaps [HTTP/1.1 200 OK 28558ms]
[13:07:15.497] GET https://mts0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=350&y=819&z=11&s=Galil&style=api%7Csmartmaps [HTTP/1.1 200 OK 28599ms]
[13:07:15.513] GET https://mts0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=352&y=819&z=11&s=Gal&style=api%7Csmartmaps [HTTP/1.1 200 OK]
[13:07:15.532] GET https://mts1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=349&y=819&z=11&s=Ga&style=api%7Csmartmaps [HTTP/1.1 200 OK 617ms]
[13:07:15.550] GET https://mts1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=353&y=819&z=11&s=Galile&style=api%7Csmartmaps [HTTP/1.1 200 OK]
[13:07:15.568] GET https://mts0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=348&y=819&z=11&s=Galileo&style=api%7Csmartmaps [HTTP/1.1 200 OK 2062ms]
[13:07:15.586] GET https://mts0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=354&y=819&z=11&s=G&style=api%7Csmartmaps [HTTP/1.1 200 OK 23675ms]
[13:07:15.605] GET https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d33.779004&2d-119.58592199999998&2m2&1d33.779005&2d-116.77204799999998&2u11&4sen-US&5e0&6sm%40177000000&7b0&8e0&9b0&callback=_xdc_._b2m4dv&token=102820 [HTTP/1.1 200 OK 613ms]
[13:07:15.735] GET https://maps.gstatic.com/mapfiles/markers2/marker_sprite.png [HTTP/1.1 304 Not Modified 548ms]
[13:07:15.771] GET https://maps.gstatic.com/mapfiles/google_white.png [HTTP/1.1 304 Not Modified 492ms]
[13:07:15.793] GET https://maps.gstatic.com/mapfiles/mv/imgs8.png [HTTP/1.1 304 Not Modified 537ms]
[13:07:15.817] GET https://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png [HTTP/1.1 304 Not Modified 488ms]
[13:07:15.840] GET https://maps.gstatic.com/mapfiles/rotate2.png [HTTP/1.1 304 Not Modified 524ms]
[13:07:15.867] GET https://maps.gstatic.com/mapfiles/szc4.png [HTTP/1.1 304 Not Modified 8593ms]
[13:07:16.718] GET https://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=src:apiv3,ts:1336903635713 [HTTP/1.1 204 No Content 25149ms]
[13:07:17.045] GET https://maps.googleapis.com/maps/gen_204?imp=v3rmi [HTTP/1.1 204 No Content 1797ms]
[13:07:18.123] GET https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp%3A%2F%2Flocalhost%3A1790%2FGPSPath%2F&4sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&5e1&callback=_xdc_._7q1ogj&token=110396 [HTTP/1.1 200 OK 1516ms]
[13:07:19.267] GET https://maps.googleapis.com/maps/gen_204?ev=api_ads&cad=src:apiv3,ads:0 [HTTP/1.1 204 No Content 529ms]
--
[13:07:26.354] GET https://maps.googleapis.com/maps/gen_204?ev=api_marker&cad=src:apiv3,m:3,d:0,s:0 [HTTP/1.1 204 No Content 7027ms]

调试(没有 https 和我自己的 css)

[13:26:45.411] GET http://localhost:1790/GPSPath/ [HTTP/1.1 200 OK 33ms]
[13:26:45.469] GET http://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false [HTTP/1.0 200 OK 1507ms]
[13:26:47.017] GET http://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/11/main.js [HTTP/1.0 304 Not Modified 3130ms]
[13:26:50.331] Error in parsing value for 'background'.  Declaration dropped. @ http://localhost:1790/GPSPath/
[13:26:50.403] GET http://maps.gstatic.com/mapfiles/openhand_8_8.cur [HTTP/1.0 304 Not Modified 1410ms]
[13:26:50.417] GET http://maps.gstatic.com/mapfiles/transparent.png [HTTP/1.0 304 Not Modified 1408ms]
[13:26:50.444] GET http://maps.gstatic.com/mapfiles/undo_poly.png [HTTP/1.0 304 Not Modified 1391ms]
[13:26:50.456] GET http://mt1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=351&y=819&z=11&s=&style=api%7Csmartmaps [HTTP/1.0 200 OK 4922ms]
[13:26:50.469] GET http://mt0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=350&y=819&z=11&s=Galil&style=api%7Csmartmaps [HTTP/1.0 200 OK 2159ms]
[13:26:50.482] GET http://mt0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=352&y=819&z=11&s=Gal&style=api%7Csmartmaps [HTTP/1.0 200 OK 6249ms]
[13:26:50.496] GET http://mt1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=349&y=819&z=11&s=Ga&style=api%7Csmartmaps [HTTP/1.0 200 OK 2783ms]
[13:26:50.510] GET http://mt1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=353&y=819&z=11&s=Galile&style=api%7Csmartmaps [HTTP/1.0 200 OK 5163ms]
[13:26:50.525] GET http://mt0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=348&y=819&z=11&s=Galileo&style=api%7Csmartmaps [HTTP/1.0 200 OK 4399ms]
[13:26:50.541] GET http://mt0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=354&y=819&z=11&s=G&style=api%7Csmartmaps [HTTP/1.0 200 OK 4457ms]
[13:26:50.557] GET http://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d33.779004&2d-119.58592199999998&2m2&1d33.779005&2d-116.77204799999998&2u11&4sen-US&5e0&6sm%40177000000&7b0&8e0&9b0&callback=_xdc_._3ozhak&token=76645 [HTTP/1.0 200 OK 2786ms]
[13:26:50.677] GET http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png [HTTP/1.0 304 Not Modified 4145ms]
[13:26:50.697] GET http://maps.gstatic.com/mapfiles/google_white.png [HTTP/1.0 304 Not Modified 5866ms]
[13:26:50.718] GET http://maps.gstatic.com/mapfiles/mv/imgs8.png [HTTP/1.0 304 Not Modified 6548ms]
[13:26:50.751] GET http://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png [HTTP/1.0 304 Not Modified 8332ms]
[13:26:50.774] GET http://maps.gstatic.com/mapfiles/rotate2.png [HTTP/1.0 304 Not Modified 8333ms]
[13:26:50.803] GET http://maps.gstatic.com/mapfiles/szc4.png [HTTP/1.0 304 Not Modified 9155ms]
[13:26:51.679] GET http://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=src:apiv3,ts:1336904810659 [HTTP/1.0 204 No Content 1528ms]
[13:26:54.287] GET http://maps.googleapis.com/maps/gen_204?imp=v3rmi [HTTP/1.0 204 No Content 2254ms]
[13:26:54.317] GET http://maps.googleapis.com/maps/gen_204?ev=api_ads&cad=src:apiv3,ads:0 [HTTP/1.0 204 No Content 2221ms]
[13:26:55.187] GET http://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp%3A%2F%2Flocalhost%3A1790%2FGPSPath%2F&4sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&5e1&callback=_xdc_._r427nf&token=99497
[13:26:57.673] GET http://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot&rt=jl.3192,mc.3219,mb.3306,vt.9667,prt.9667,plt.9640,mt.9668&size=1366x0&maptype=m [HTTP/1.0 204 No Content 1729ms]
[13:27:01.374] GET http://maps.googleapis.com/maps/gen_204?ev=api_marker&cad=src:apiv3,m:3,d:0,s:0 [HTTP/1.0 204 No Content 1703ms]
--
[13:27:20.192] GET http://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent?1shttp%3A%2F%2Flocalhost%3A1790%2FGPSPath%2F&3sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&4e1&5e0&6u1&7s5ymgop&callback=_xdc_._ux5mz6&token=23247 [HTTP/1.0 200 OK 1736ms]

从 Firebug 调试

我没有得到有效的“__VIEWSTATE”div 好吗？难道是这个原因？？

<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1NTM1MjUzMzUPZBYCAgEPFgIeBFRleHQFsQ48c2NyaXB0IHR5cGU9J3RleHQvamF2YXNjcmlwdCc+DQoNCiAgICAgICAgICAgIHZhciBwb2x5Ow0KICAgICAgICAgICAgdmFyIG1hcDsNCg0KICAgICAgICAgICAgZnVuY3Rpb24gaW5pdGlhbGl6ZSgpIHsNCiAgICAgICAgICAgICAgICANCiAgICAgICAgICAgICAgICB2YXIgY21sb2MgPSBuZXcgZ29vZ2xlLm1hcHMuTGF0TG5nKDMzLjc3OTAwNSwgLTExOC4xNzg5ODUpOw0KICAgICAgICAgICAgICAgIHZhciBteU9wdGlvbnMgPSB7DQogICAgICAgICAgICAgICAgICAgIHpvb206IDExLA0KICAgICAgICAgICAgICAgICAgICBjZW50ZXI6IGNtbG9jLA0KICAgICAgICAgICAgICAgICAgICBtYXBUeXBlSWQ6IGdvb2dsZS5tYXBzLk1hcFR5cGVJZC5ST0FETUFQDQogICAgICAgICAgICAgICAgfTsNCg0KICAgICAgICAgICAgICAgIG1hcCA9IG5ldyBnb29nbGUubWFwcy5NYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21hcF9jYW52YXMnKSwgbXlPcHRpb25zKTsNCg0KDQogICAgICAgICAgICAgICAgdmFyIHBvbHlPcHRpb25zID0gew0KICAgICAgICAgICAgICAgICAgICBzdHJva2VDb2xvcjogJ2JsdWUnLA0KICAgICAgICAgICAgICAgICAgICBzdHJva2VPcGFjaXR5OiAwLjUsDQogICAgICAgICAgICAgICAgICAgIHN0cm9rZVdlaWdodDogMw0KICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICBwb2x5ID0gbmV3IGdvb2dsZS5tYXBzLlBvbHlsaW5lKHBvbHlPcHRpb25zKTsNCiAgICAgICAgICAgICAgICBwb2x5LnNldE1hcChtYXApOw0KDQogICAgICAgICAgICAgICAgdmFyIHBhdGggPSBwb2x5LmdldFBhdGgoKTsNCg0KICAgICAgICAgICAgICAgDQoNCiAgICAgICAgICAgICAgICBwYXRoLnB1c2gobmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy43NzkwMDUsIC0xMTguMTc4OTg1KSk7DQoNCiAgICAgICAgICAgICAgICB2YXIgbWFya2VyMCA9IG5ldyBnb29nbGUubWFwcy5NYXJrZXIoew0KICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogbmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy43NzkwMDUsIC0xMTguMTc4OTg1KSwNCiAgICAgICAgICAgICAgICAgICAgdGl0bGU6ICcjJyArIHBhdGguZ2V0TGVuZ3RoKCksDQogICAgICAgICAgICAgICAgICAgIG1hcDogbWFwDQogICAgICAgICAgICAgICAgfSk7DQoNCiAgICAgICAgICAgICAgICBwYXRoLnB1c2gobmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy44NzkwMDUsIC0xMTguMDk4OTg1KSk7DQoNCiAgICAgICAgICAgICAgICB2YXIgbWFya2VyMSA9IG5ldyBnb29nbGUubWFwcy5NYXJrZXIoew0KICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogbmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy44NzkwMDUsIC0xMTguMDk4OTg1KSwNCiAgICAgICAgICAgICAgICAgICAgdGl0bGU6ICcjJyArIHBhdGguZ2V0TGVuZ3RoKCksDQogICAgICAgICAgICAgICAgICAgIG1hcDogbWFwDQogICAgICAgICAgICAgICAgfSk7DQoNCiAgICAgICAgICAgICAgICBwYXRoLnB1c2gobmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy45NzkwMDUsIC0xMTguMjE4OTg1KSk7DQoNCiAgICAgICAgICAgICAgICB2YXIgbWFya2VyMiA9IG5ldyBnb29nbGUubWFwcy5NYXJrZXIoew0KICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogbmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy45NzkwMDUsIC0xMTguMjE4OTg1KSwNCiAgICAgICAgICAgICAgICAgICAgdGl0bGU6ICcjJyArIHBhdGguZ2V0TGVuZ3RoKCksDQogICAgICAgICAgICAgICAgICAgIG1hcDogbWFwDQogICAgICAgICAgICAgICAgfSk7DQoNCiAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgIDwvc2NyaXB0PmRkie8SLlkqGTTBQBDxeXJTGLNO6B5kIpNtL0F7eqM9j8U=" type="hidden">
</div>

---代码被截断---

Answer 1

看起来答案可能和以前一样。

GET https://developers.google.com/maps/documentation/javascript/examples/default.css 

表示您正在加载 Google 的 CSS。 不要那样做。使用你自己的(和以前一样)。

请注意，如果您希望 map Canvas 覆盖整个页面(即 {height:100%} )，您必须确保包含 <div> 的每个元素也定义了它的高度。这至少包括 <body>和 <html>还有包含 map 的所有其他元素。

对于 ASP 页面，有一个 <form>也需要定义的元素。

GET http://localhost:1790/GPSPath/表示您正在使用 HTTP，但对 API 和样式表的引用使用 HTTPS。您是否使用 HTTPS 加载 API？如果您自己的页面不使用它，则无需执行此操作。