jez*_*pin 5 javascript google-maps google-maps-api-3
我目前正在首次使用Google Maps API.基本上我希望将地图缩小,以便显示整个世界没有重叠(例如某个国家的位不会在地图的任何一侧重复).
我发现最接近我要求的是这个问题: 谷歌地图API V3:展示整个世界
但是,此问题的最佳答案并未提供所需的完整代码.
我使用Google的入门示例作为HTML的基础:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuP_BOi6lD7L6ZY7JTXRdhY1YEj_gcEP0&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 1
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
但是,在上面问题中提供的示例中,已指定了许多其他变量.我的问题是,我从哪里插入上述问题的代码,以确保我的世界地图正确显示？
如果您不想重复,则需要控制允许的最小缩放比例和地图宽度,使其小于或等于地图上允许的最小缩放级别的基本图块的宽度.在缩放零点处,世界的一个宽度是单个256 x 256像素图块,每个缩放级别增加2倍.
这将在缩放级别1(512x512地图画布)上显示地图的一个宽度,您可以更改高度,但是在缩放0时宽度需要为256,缩放1时为512,缩放2时为1024等等:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 512px; width:512px;}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 1,
minZoom: 1
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
代码段:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 1,
minZoom: 1
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map-canvas {
height: 512px;
width: 512px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>| 归档时间： |
|
| 查看次数： |
15635 次 |
| 最近记录： |