显示没有重复的世界地图
Display world map with no repeats
我目前第一次使用谷歌地图API。从本质上讲，我希望将地图缩小，这样整个世界就不会重叠显示（例如，某个国家的部分不会在地图的两侧重复）。
我发现最接近我的要求的是这个SO问题：谷歌地图API V3:显示全世界
然而，这个问题的最高答案并没有提供所需的完整代码。
我使用了谷歌的入门示例作为我的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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>这里有一个函数worldViewFit我喜欢使用：
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 1,
minZoom: 1
};
map = new google.maps.Map(document.getElementById('officeMap'), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function() {
//Map is ready
worldViewFit(map);
});
}
function worldViewFit(mapObj) {
var worldBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(70.4043,-143.5291), //Top-left
new google.maps.LatLng(-46.11251, 163.4288) //Bottom-right
);
mapObj.fitBounds(worldBounds, 0);
var actualBounds = mapObj.getBounds();
if(actualBounds.getSouthWest().lng() == -180 && actualBounds.getNorthEast().lng() == 180) {
mapObj.setZoom(mapObj.getZoom()+1);
}
}
google.maps.event.addDomListener(window, 'load', initMap);html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#officeMap {
height: 512px;
width: 512px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="officeMap"></div>这是我能做的最好的事情，
const mapOptions = {
zoom:1,
minZoom: 2, // Set your desired minZoom level
maxZoom: 25,
restriction: {
latLngBounds: {
north: 85.0 , // Define your desired latitude boundaries
south: -85.0 , // Define your desired latitude boundaries
west: -50.0, // Define your desired longitude boundaries
east: 50.0,
},
},
在渲染ui中，
<GoogleMap
options={mapOptions}
onLoad={handleOnLoad}
onClick={() => setActiveMarker(null)}
mapContainerStyle={{ width: "100%", height: "100vh" }}
>
PS>> this is a react js code
这是我找到的JavaScript：
/**
* All locations map scripts
*/
jQuery(function($){
$(document).ready(function(){
loadmap();
});
function loadmap()
{
var locations = wpsl_locator_all.locations;
var mapstyles = wpsl_locator.mapstyles;
var mappin = ( wpsl_locator.mappin ) ? wpsl_locator.mappin : '';
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap',
mapTypeControl: false,
zoom: 8,
styles: mapstyles,
panControl : false
}
if ( wpsl_locator.custom_map_options === '1' ) mapOptions = wpsl_locator.map_options;
var infoWindow = new google.maps.InfoWindow(), marker, i;
var map = new google.maps.Map( document.getElementById('alllocationsmap'), mapOptions );
// Loop through array of markers & place each one on the map
for( i = 0; i < locations.length; i++ ) {
var position = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
bounds.extend(position);
var marker = new google.maps.Marker({
position: position,
map: map,
title: locations[i].title,
icon: mappin
});
// Info window for each marker
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function() {
infoWindow.setContent(locations[i].infowindow);
infoWindow.open(map, marker);
wpsl_all_locations_marker_clicked(marker, infoWindow)
}
})(marker, i));
// Center the Map
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() {
if ( locations.length < 2 ) {
map.setZoom(13);
}
google.maps.event.removeListener(listener);
});
}
// Fit the map bounds to all the pins
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
google.maps.event.removeListener(boundsListener);
});
wpsl_all_locations_rendered(map);
} // loadmap()
});
相关文章：
- 张贴到地图显示的限制
- 谷歌地图显示灰色方框
- 无法让谷歌地图显示在我的网站上
- Google Maps Javascript API v3 地图显示在桌面浏览器上，但不会显示在移动浏览器上
- 双击谷歌地图显示提示框不起作用
- 如何更改世界地图json文件的中心子午线
- 使用d3.js重复世界地图投影
- 显示没有重复的世界地图
- 在拉斐尔JS世界地图中添加国家点击操作
- 谷歌地图显示钦奈(印度）使用javascript
- 放大世界地图上的D3弹出窗口大小
- Raphael.js世界地图:如何使其可扩展
- SVG 世界地图坐标
- 使用 IMG 地图显示更大的图像
- 当缩放级别为 1 时，谷歌地图显示 kml(内部是图像 URL）不正确
- 无法让我的 openlayers 地图显示在网页上
- 谷歌地图显示没有jQuery
- 阿根廷没有出现在世界地图上，d3.js
- HTML/CSS/JS 世界地图与简单的动画
- 如何使用jVectorMap插件在世界地图上突出显示某个城市
