Fatal编程技术网
  • javascript/
  • Javascript 显示不重复的世界地图

Javascript 显示不重复的世界地图

javascript google-maps google-maps-api-3

Javascript 显示不重复的世界地图,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我目前第一次使用谷歌地图API。 基本上，我希望将地图缩小，以便显示整个世界而不重叠（例如，某个国家的部分不会在地图的两侧重复） 我发现最接近我的要求的是这个问题： 但是，这个问题的顶部答案并没有提供所需的完整代码 我使用了谷歌的初学者示例作为HTML的基础： <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalab

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

我发现最接近我的要求的是这个问题：

但是，这个问题的顶部答案并没有提供所需的完整代码

我使用了谷歌的初学者示例作为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>


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（-34.397150.644），
缩放：1
};
var map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
然而，在上述问题中提供的示例中，指定了许多附加变量。我的问题是，我在哪里插入上面问题中的代码以确保正确显示我的世界地图？

如果您不想重复，您需要控制允许的最小缩放，并且地图的宽度小于或等于地图上允许的最小缩放级别的基础分幅的一个宽度。 在缩放为零时，世界的一个宽度是一个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>

html{
身高：100%
}
身体{
身高：100%；
保证金：0；
填充：0
}
#地图画布{
高度：512px；
宽度：512px；
}
这是我找到的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()

});

/**
*所有位置映射脚本
*/
jQuery（函数（$）{
$（文档）.ready（函数（）{
loadmap（）；
});
函数loadmap（）
{
变量位置=wpsl_定位器_所有位置；
var mapstyles=wpsl_locator.mapstyles；
var mappin=（wpsl_locator.mappin）？wpsl_locator.mappin:“”；
var bounds=new google.maps.LatLngBounds（）；
变量映射选项={
mapTypeId:“路线图”，
mapTypeControl:false，
缩放：8，
样式：地图样式，
泛控制：错误
}
如果（wpsl_locator.custom_map_options=='1'）map options=wpsl_locator.map_options；
var infoWindow=new google.maps.infoWindow（），marker，i；
var map=new google.maps.map（document.getElementById（'alllocationsmap'），mapOptions）；
//在标记数组中循环并将每个标记放置在地图上
对于（i=0；i
这里有一个函数worldViewFit我喜欢使用：

函数initMap（）{
变量映射选项={
中心：新google.maps.LatLng（0,0），
缩放：1，
最小缩放：1
};
map=new google.maps.map（document.getElementById（'officeMap'），mapOptions）；
google.maps.event.addListenerOnce（map'idle'，function（）{
//地图准备好了
worldViewFit（地图）；
});
}
函数worldViewFit（mapObj）{
var worldBounds=new google.maps.LatLngBounds(
新的google.maps.LatLng（70.4043，-143.5291），//左上角
新的google.maps.LatLng（-46.11251163.4288）//右下角
);
mapObj.fitBounds（worldBounds，0）；
var actualBounds=mapObj.getBounds（）；
如果（actualBounds.getSouthWest（）.lng（）=-180&&actualBounds.getNorthwest（）.lng（）==180）{
setZoom（mapObj.getZoom（）+1）；
}
}
google.maps.event.addDomListener（窗口'load'，initMap）

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#办公地图{
高度：512px；
宽度：512px；
}




这很好，但是无论高度如何，它都会在地图底部生成一个灰色框。有没有办法摆脱这个看起来很可怕的灰色框。你可以将高度改为256的倍数，垂直方向不重复。@jezzipin:你也可以将
minZoom
设置为2，或其他更高级别，具体取决于你想显示地图的设备。如果最小变焦系数太低，宽屏幕确实会在顶部和底部显示这些灰色框。