顯示沒有重複的世界地圖

我目前首次使用Google Maps API。基本上我希望縮小地圖，以便整個世界顯示爲不重疊（例如某個國家的位在地圖的任何一邊都不重複）。顯示沒有重複的世界地圖

我發現我的要求，最接近的是這太問題： Google Maps API V3: Show the whole world

然而，在這個問題上的答案不提供所需的完整代碼。

我已經使用從谷歌啓動例子爲基準，爲我的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>

然而，在上述的一些其他變量的問題提供的例子已經說明。我的問題是，我從哪裏插入上述問題的代碼以確保我的世界地圖顯示正確？

來源

2013-12-10 jezzipin

如果您不想要重複，您需要控制允許的最小縮放比例和地圖寬度，使其小於或等於地圖上允許的最小縮放比例基礎圖塊的一個寬度。在縮放零點時，世界的一個寬度是單個256 x 256像素的拼貼，每個縮放等級增加2倍。

這將顯示縮放級別1的地圖的一個寬度（512x512 map-帆布），可以改變高度，但寬度將需要256在變焦0,512縮放1，1024在變焦2等：

<!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>

來源

2013-12-10 17:05:24 geocodezip

這是偉大的但是它產生在地圖底部的灰色框，無論高度。有沒有辦法擺脫這個灰色的盒子，因爲它看起來很可怕。 – jezzipin

您可以將高度改爲小於256的倍數，垂直方向不重複。 – geocodezip

@jezzipin：您也可以將minZoom設置爲2或其他更高級別，具體取決於您想要顯示地圖的設備。如果最小變焦係數太低，寬屏幕確實會在頂部和底部顯示這些灰色框。 –

-2

這是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() 

});

來源

2017-07-10 14:46:25 Pixel

顯示沒有重複的世界地圖

回答

相關問題