显示没有重复的世界地图 [英] Display world map with no repeats
问题描述
我目前首次使用Google Maps API。
基本上我希望缩小地图，以便整个世界不会重叠显示（例如某个国家的地图不会在地图的任何一边重复）。
我发现的最接近我的要求是这样的问题：
Google Maps API V3：展示全球
我已经使用Google的入门示例作为HTML的基础：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：0; padding：0}
＃map-canvas {height：100％}
< / style>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?key=AIzaSyCuP_BOi6lD7L6ZY7JTXRdhY1YEj_gcEP0&sensor=false>
< / script>
< script type =text / javascript>
函数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 =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：0; padding：0}
＃map-canvas {height：512px; width：512px;}
< / style>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?v=3&sensor=false>
< / script>
< script type =text / javascript>
函数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％;保证金：0; padding：0}＃map-canvas {height：512px; width：512px;}
< script src =https ：//maps.googleapis.com/maps/api/js>< / script>< div id =map-canvas>< / div>
I'm currently using the Google Maps API for the first time. Essentially I wish to have the map zoomed out so that the whole world is displayed with no overlap (e.g. bits of a certain country are not repeated on either side of the map).
The closest I have found to my requirements is this SO question: Google Maps API V3: Show the whole world
However, the top answer on this question does not provide the full code required.
I have used the starter example from Google as the base for my 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>
However, in the example provided in the question above a number of additional variables have been specified. My question is, where do I plug in the code from the question above to ensure that my world map is displayed correctly?
If you don't want any repeats, you need to control the minimum zoom allowed and the width of your map to be less than or equal to one width of of the base tiles at the minimum zoom level allowed on your map. At zoom zero, one width of the world is a single 256 x 256 pixel tile, each zoom level increases that by a factor of 2.
This will show one width of the map at zoom level 1 (512x512 map-canvas), you can change the height, but the width will need to be 256 at zoom 0, 512 at zoom 1, 1024 at zoom 2, etc:
<!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>
code snippet:
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>
这篇关于显示没有重复的世界地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
