Question

我目前第一次使用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>

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

Answer 1

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

Answer 2

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

Answer 3

这是我发现的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()

});

显示没有重复的世界地图

3 个答案: