Javascript 使用谷歌地图api时看不到实际地图

<!DOCTYPE>

身体{
保证金：0；
填充：10px 20px 20px；
字体系列：Arial；
字体大小：16px；
}
#地图容器{
填充：6px；
边框宽度：1px；
边框样式：实心；
边框颜色：#ccc#ccc#999#ccc；
-webkit盒阴影：rgba（64,64,64,0.5）0 2px 5px；
-moz盒阴影：rgba（64,64,64,0.5）0 2px 5px；
盒影：rgba（64,64,64,0.1）0 2px 5px；
宽度：100%；
}
#地图{
宽度：100%；
身高：98%；
}
函数初始化（）{
var center=newgoogle.maps.LatLng（48.13333,11.566667）；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心:中心,，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var标记=[]；
对于（变量i=0；i<100；i++）{
var dataPhoto=data.weblandmarks[i]；
var latLng=新的google.maps.latLng（dataPhoto.latitude，
经度）；
var marker=new google.maps.marker({
职位：latLng
});
标记器。推（标记器）；
}
var markerCluster=新的MarkerClusterer（地图、标记）；
}

<!DOCTYPE>

<!DOCTYPE>

我正在使用带有markercluster的maps api来显示许多地方 我可以看到缩放栏，也可以看到markercluster生成的簇，但看不到实际的地图图像

---

为什么？

你可以试着像这样制作地图：

<!DOCTYPE>

<style type="text/css">
  body {
    margin: 0;
    padding: 10px 20px 20px;
    font-family: Arial;
    font-size: 16px;
  }

  #map-container {
    padding: 6px;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #ccc #999 #ccc;
    -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
    width: 100%;
  }

  #map {
    width: 100%;
    height: 98%;
  }

</style>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="data/weblandmark.json"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(48.133333, 11.566667);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var dataPhoto = data.weblandmarks[i];
      var latLng = new google.maps.LatLng(dataPhoto.latitude,
          dataPhoto.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer (map, markers);
  }
</script>

---

这很挑剔，但如果您以后必须向地图添加大量信息（加载后标记/侦听器/缩放），则使用地图会更容易。

您可以尝试这样制作地图：

<!DOCTYPE>

<style type="text/css">
  body {
    margin: 0;
    padding: 10px 20px 20px;
    font-family: Arial;
    font-size: 16px;
  }

  #map-container {
    padding: 6px;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #ccc #999 #ccc;
    -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
    width: 100%;
  }

  #map {
    width: 100%;
    height: 98%;
  }

</style>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="data/weblandmark.json"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(48.133333, 11.566667);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var dataPhoto = data.weblandmarks[i];
      var latLng = new google.maps.LatLng(dataPhoto.latitude,
          dataPhoto.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer (map, markers);
  }
</script>

---

这很挑剔，但如果您以后必须向地图添加大量信息（加载后的标记/侦听器/缩放），则使用地图会容易得多。

尝试添加以下CSS：

<!DOCTYPE>

//The options for the google map
var mapOptions = {
    zoom: 3,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP //Or whatever you want
};

var map = new google.maps.Map(document.getElementById('#map'), mapOptions);

---

尝试添加以下CSS：

<!DOCTYPE>

//The options for the google map
var mapOptions = {
    zoom: 3,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP //Or whatever you want
};

var map = new google.maps.Map(document.getElementById('#map'), mapOptions);

---

不，这不是问题。谷歌地图会出现，但里面没有真实的街道图像。如果试图同时进行许多更改，地图会生成得很奇怪，这就是为什么在地图之前做出所有选择有时会清除这些问题的原因。不，这不是问题。谷歌地图会出现，但是，只有在没有真实街道图像的情况下，地图才会产生奇怪的效果，如果有太多的改变试图一次完成，这就是为什么在地图清除这些问题之前做出所有的选择——只需将“地图”的宽度设置为100%，将“高度”设置为“自动”。只需将“地图”的宽度设置为100%，将“高度”设置为“自动”。