IT技术 - 显示世界地图没有重复 - 吾爱随笔录

显示世界地图没有重复

IT技术 javascript google-maps google-maps-api-3

2021-03-20 05:40:04

我目前是第一次使用 Google Maps API。基本上我希望地图缩小，以便整个世界显示时没有重叠（例如，某个国家的部分不会在地图的两侧重复）。

我发现最接近我的要求的是这个问题： 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>

但是，在上述问题中提供的示例中，已指定了许多附加变量。我的问题是，我在哪里插入上述问题中的代码以确保我的世界地图正确显示？

3个回答

如果您不想重复，则需要控制允许的最小缩放比例和地图宽度，使其小于或等于地图上允许的最小缩放级别的基本图块的宽度之一。在缩放为零时，世界的一个宽度是单个 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>

这很棒，但是无论高度如何，它都会在地图底部生成一个灰色框。有什么办法可以摆脱这个灰色盒子，因为它看起来很可怕。

2021-04-24 05:40:04

@jezzipin：您也可以设置minZoom为 2 或更高级别，具体取决于您要在其上显示地图的设备。如果最小缩放系数太低，宽屏幕确实会在顶部和底部显示那些灰色框。

2021-05-01 05:40:04

您可以将高度更改为小于 256 的倍数，垂直方向不重复。

2021-05-05 05:40:04

这是我喜欢使用的函数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>

这是我找到的 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()

});

其它你可能感兴趣的问题

上一篇如何使用用户脚本覆盖警报功能？下一篇golang更新变量时动态刷新模板的一部分