我目前是第一次使用 Google Maps API。 本质上，我希望将 map 缩小，以便整个世界显示时不会重叠(例如，某个国家/地区的某些部分不会在 map 的任何一侧重复)。
我发现最接近我的要求的是这个 SO 问题: Google Maps API V3: Show the whole world
但是，此问题的最佳答案并未提供所需的完整代码。
我使用 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>
但是，在上述问题中提供的示例中，已指定了一些附加变量。我的问题是，我在哪里插入上述问题的代码以确保正确显示我的世界地图？
最佳答案
如果您不想要任何重复，您需要控制允许的最小缩放比例，并且您的 map 宽度小于或等于 map 允许的最小缩放级别下基本图 block 的一个宽度。 在缩放为零时，世界的一个宽度是一个 256 x 256 像素的图 block ，每个缩放级别将其增加 2 倍。
这将在缩放级别 1 时显示 map 的一个宽度(512x512 map Canvas )，您可以更改高度，但宽度需要在缩放级别 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>关于javascript - 显示没有重复的世界地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20498210/