作为更大项目的一部分,我们尝试使用Google的Map API v3在网站上获取地图.我已经按照Google制定的最简单的步骤进行了操作,我尝试从其他工作地图中直接复制代码.但无论我做什么,我们得到的只是一个灰色的盒子,没有地图.
使用Firebug,我可以看到试图填充地图的信息,但它根本就不显示.我已经尝试了专门为谷歌地图制作的jquery,jquery库,没有任何工作.我一直在互联网上,所有通过谷歌的api帮助文件.此外,问题不是本地的,因为我已将文件上载到多个服务器并在多个浏览器和计算机上进行测试.什么都行不通.
在这一点上,我忽略了一些愚蠢的东西.这是我的代码.
<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true">
</script>
<script type="text/javascript">
function load()
{
var mapDiv = document.getElementById("map");
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions =
{
//zoom: 8,
center:latlng,
//backgroundColor: '#ff0000',
mapTypeId: google.maps.MapTypeId.ROADMAP,
imageDefaultUI: true
};
var map = new google.maps.Map(mapDiv, mapOptions);
function createMarker(point, text, title)
{
var marker =
new GMarker(point,{title:title});
return marker;
}
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>
Mir*_*dak 31
这适合我.你只需要设置zoom参数:
更新(由@ user2652379提供):您需要设置BOTH zoom和center选项.只是zoom不起作用.
<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</script>
<script type="text/javascript">
function load()
{
var mapDiv = document.getElementById("map");
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions =
{
zoom: 8,
center:latlng,
//backgroundColor: '#ff0000',
mapTypeId: google.maps.MapTypeId.ROADMAP,
//imageDefaultUI: true
};
var map = new google.maps.Map(mapDiv, mapOptions);
// map.addControl(new GSmallMapControl());
// map.addControl(new GMapTypeControl());
// map.addMapType(ROADMAP);
// map.setCenter(
// new GLatLng(37.4419, -122.1419), 13);
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height: 400px;"> </div>
</body>
</html>
Ole*_*leg 12
另一种情况是在初始化地图时隐藏地图容器.例如,你在bootstrap show.bs.modal事件中进行,而不是shown.bs.modal
小智 11
我遇到了同样的问题,在stackoverflow上遇到了很多主题,但没有一个能为我提供有效的解决方案.我最终发现它是由我添加的一行css引起的.
地图中的所有元素都继承了
overflow:hidden;
通过在我的CSS中添加以下行,它已得到修复
#map * {
overflow:visible;
}
小智 5
我想快速评论添加到这一点，因为我有同样的问题用的zoom参数集。我发现问题出在我主题的CSS上。在我的基本主题中，我有以下CSS：
img, embed, object, video {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
这弄乱了地图的渲染，删除后，我的地图渲染就很好了。
还要注意地图中心或标记的纬度或经度值无效。例如，这个小提琴显示了死亡的灰色地图，因为地图中心位于无效的纬度 131.044（不是从 +90:-90）。
function initMap() {
var uluru = {lat: 131.044, lng: -25.363};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
| 归档时间： |
|
| 查看次数： |
46565 次 |
| 最近记录： |