阻止Google地图加载超出特定缩放级别

时间:2012-11-07 23:55:08

标签: javascript google-maps

我有一些带有一些叠加层的Google地图,当缩放高于某个值(比如17)时,叠加层会完全覆盖地图。

我想阻止地图图块加载超出该缩放级别,因为它位于叠加层后面,导致不必要的数据传输。有可能吗?

编辑:

我需要类似的东西:

google.maps.event.addListener(map, 'zoom_changed', function() { 
    if(map.getZoom()>=zoomToHideMap)
        stopLoadingTiles();
    else
        startLoadingTiles();
}); 

谢谢

3 个答案:

答案 0 :(得分:1)

我的解决方案是在onzoomchanged事件上将Map Type更改为null。

google.maps.event.addListener(map, 'onzoomchanged', function() {
    if(closeEnough)
        map.setMapTypeId(null)
    else
        map.setMapTypeId(google.maps.MapTypeId.SATELLITE)
})

由于叠加层完全覆盖了地图,因此我将其用作基础图层而不是叠加层,以进行特定级别的放大。

答案 1 :(得分:0)

如果您使用OpenLayers,则可以更好地控制地图的行为。您仍然可以使用Google的地图图片:

答案 2 :(得分:0)

不是来自我而是有趣:


    
        
        
            html, body { height: 100%;}
            #map_canvas { height: 1000px;}
        
    
    
        
        
        
            var options =
            {
                getTileUrl: function(coord, zoom)
                {
                    // Don't load tiles for repeated maps
                    var tileRange = 1 = tileRange || coord.x = tileRange )
                        return null;

                    // Load the tile for the requested coordinate
                    var file = 'images/zoom' + zoom + '/tile_' + zoom + '_' + (coord.x) + '_' + (coord.y) + '.jpg';

                    return file;
                },
                tileSize: new google.maps.Size(256, 256),
                minZoom: 1,
                maxZoom: 9,
                radius: 1738000, // I got this from an example in the api, I have no idea what this does
                name: 'Map',
            };
            var mapOptions =
            {
                center: new google.maps.LatLng(0,0),
                zoom: 2,
                backgroundColor: '#000',
                streetViewControl: false,
                mapTypeControl: false
            };

            var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
            var mapType = new google.maps.ImageMapType(options);
            map.mapTypes.set('map', mapType);
            map.setMapTypeId('map');

            var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(0,0),
                    map: map,
                    title: "Test"
            });
            
    

相关问题