firefox中没有显示谷歌地图
google map is not show in firefox
它在chrome中运行良好。但当firefox加载时,谷歌地图的右侧将留空。而且似乎所有的代码功能都运行良好(Springmvc和Jquery)你也可以在sameplaces.heroku.com上看到该应用程序。谢谢
<html>
<head>
<link rel="stylesheet" href="resources/development-bundle/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="resources/js/jquery-1.9.1.js"></script>
<script src="resources/development-bundle/ui/jquery.ui.core.js"></script>
<script src="resources/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="resources/development-bundle/ui/jquery.ui.button.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/layout.css"/>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA8_h_OaZwi_KRiDev5M8PUxhKRuKbOj1Q&sensor=true">
</script>
<script type="text/javascript">
$(function(){
$("input[type=submit],input[type=button],a,button")
.button()
.click(function(event){
event.preventDefault();
});
});
var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag = new Boolean();
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
}
// Browser doesn't support Geolocation
else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
$(".address_search_div").show();
initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
initialLocation = siberia;
}
map.setCenter(initialLocation);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td width="35%" height="100%"><t:insertAttribute name="menu"/></td>
<td width="65%" height="100%"><t:insertAttribute name="map"/></td>
</tr>
</table>
</body>
</html>
我在Chrome和FF上都能使用它。我去掉了你所有的CSS和jquery,以简化一切。我添加了这种风格:
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
Chrome正常,FF报道:
Error in parsing value for 'background'. Declaration dropped.
-webkit-linear-gradient(left, #000, #fff)
解决方案是这种样式(缺少宽度):
<style type="text/css">
html { height: 100% ; width: 100%}
body { height: 100%; width:100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width:100% }
</style>
关于这个解决方案的解释是谷歌地图V3多段线加载失败。请注意,关于后台也有同样的错误消息。
所以,检查一下你的造型。代码似乎还可以。
相关文章:
- 无法在JS中显示谷歌地图
- 在Delphi TWebBrowser中按地址显示谷歌地图
- 使用来自URL的JSON数据来显示谷歌地图标记-如何
- 逐步显示谷歌地图方向
- OpenLayers显示谷歌地图
- firefox中没有显示谷歌地图
- 如何通过JavaScript代码显示谷歌地图并在设备上获取坐标
- 显示谷歌地图点击事件 - 谷歌地图API
- 切换隐藏/显示谷歌地图标记
- Odoo-在弹出窗口中显示谷歌地图片段
- 从数据库获取所有纬度和长度以显示谷歌地图上的所有位置
- 如何缩放 html5 画布以显示谷歌地图坐标
- 标记标签未显示 - 谷歌地图
- 如何使用模板中的数据显示谷歌地图
- 自定义和原始标记都显示谷歌地图 api v3
- 使用 geoxml3 隐藏/显示谷歌地图中的一些地标
- 显示谷歌地图 API 的骨干/木偶问题
- HIde或显示谷歌地图中的标记
- 如何在Laravel视图页面中动态显示谷歌地图标记
- Phonegap不会在手机中显示谷歌地图