使用谷歌地图API时无法看到实际地图
-
14-11-2019 - |
题
<!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>
.
我正在使用带有markercluster的地图api来显示许多地方 我可以看到缩放栏,也可以由MarkerCluster生成的群集,但不是实际地图图像 为什么?
解决方案
Try adding the following CSS:
html { height: 100%; }
body { height: 100%; }
其他提示
You could try making your map like this:
//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);
This is nitpicky but it makes it alot easier to work with the map if you have to add a lot of information to it later (markers/listeners/zooms after load)
不隶属于 StackOverflow