在ajax查询之后,Google Maps V3只是一个灰色框

时间:2012-12-14 16:43:44

标签: javascript html google-maps twitter-bootstrap

我最近才开始玩html,javascript,webapps等,我决定尝试编写自己的Prey独立网络服务器。

我正在使用Twitter Bootstrap用于UI,jQuery用于javascript的东西。 My reports page列出所有报告,并允许用户选择一个在地图上查看。然后页面从服务器获取数据作为JSON,一切正常。但是,当我拨打map.setCenter(new google.maps.LatLng(data['lat'], data['lng']))时,地图只会变为灰色而不是移动到该位置。

我在chrome和firefox中试过这个,我也遇到了同样的问题。奇怪的是,chrome console-debugger-thing和firebug中都没有错误。我可以在“类似问题”下看到10个类似的问题;但是这些解决方案(例如CSS)都没有帮助。

这是网站(它是dotCloud上的沙箱,因此可能非常慢):http://prey-geniass.dotcloud.com/devices/l6wyd/reports.xml

2 个答案:

答案 0 :(得分:1)

所以我注意到你将地图对象存储为window['map'](有趣的是每个人似乎都这样做...当我不必深入了解源代码时,调试更容易: ))。

我尝试使用一组已知的坐标来设置中心:

map.setCenter(new google.maps.LatLng('51.0453246', '-114.0581012'));

这很好用,所以实际的代码工作正常。我测试了一些不正确值的案例... null0会把我放在海洋中的某个地方,undefinedlat的{​​{1}}会转过来地图灰色。您传入的值可能不正确,最终为lng

查看第二个undefined,相关属性为alertlatitude,但您似乎正在传递longitudedata['lat']。这是原因吗?

这应该解决它:

data['lng']

请注意,我注释了你的'resize'触发器(我假设你可能已经添加了以解决这个问题?我记得在这里建议给另一个用户:))。在您的情况下不需要。

答案 1 :(得分:0)

好的,我刚发现了这个问题。它实际上是服务器端,我没有将Response标记为JSON,因此javascript实际上是在接收字符串,我试图将它用作JSON对象。对于任何使用Flask的人来说,这是执行此操作的代码: return Response(json.dumps(report), mimetype='text/json')

现在我现在不知道哪个答案标记为正确答案(两者在技术上都是正确的,因为有两个不同的问题)