Question

这是我的代码实际工作，但现在我想要创建该地图的副本，完全相同，但它会稍微小一点并隐藏在某个窗口大小。

如何更改代码以实现该目标？
（也可以在#google-map-mobile容器中创建完全重复的地图）

$(function(window, document, $) {

    var map,
        lat = XXX,
        lng = XXX,
        $location = $('#google-map-desktop');
        //$location2 = $('#google-map-mobile');

    // Google Map init
    $(document).ready(function() {

        $location
            .parent()
            .fadeIn(500, function() {
                locationInitialize($location);
                // Disable map drag on touch devices
                if (Modernizr.touch) {
                    map.setOptions({ draggable: false });
                }
            });

    });

    // Google Map reposition center
    var resizeTimeout;
    this.pageReady = function(e) {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function() {
            locationSetCenter($location);
        }, 250);
    }

    if (window.addEventListener) {
        window.addEventListener('resize', this.pageReady, false);
        window.addEventListener('orientationchange', this.pageReady, false);
    } else if (window.attachEvent) {
        window.attachEvent('resize', this.pageReady);
        window.attachEvent('orientationchange', this.pageReady);
    }

    // Google Map
    function locationInitialize($this) {

        // Map Location
        var mapCenter = new google.maps.LatLng( lat, lng );

        // Style Map
        var styles = [{
            stylers: [{ saturation: -90 }]
        }]
        var styledMap = new google.maps.StyledMapType( styles, { name: '{{ siteName }}' } );

        // Map Options
        var mapOptions = {
            zoom: 16,
            center: mapCenter,
            panControl: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT_TOP
            },
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
            }
        };
        map = new google.maps.Map( document.getElementById( $this.attr('id') ), mapOptions );

        // Add Map style
        map.mapTypes.set( 'map_style', styledMap );
        map.setMapTypeId( 'map_style' );

        // Change map center position
        locationSetCenter($this);

        // Add Map marker
        var marker = new google.maps.Marker({
            position: mapCenter, 
            map: map
        });

    }

    function locationSetCenter($this) {
        var mapCenter = new google.maps.LatLng( lat, lng );

        google.maps.Map.prototype.setCenterWithOffset = function( mapCenter, offsetX, offsetY ) {
            var map = this;
            var ov = new google.maps.OverlayView();
            ov.onAdd = function() {
                var proj = this.getProjection();
                var aPoint = proj.fromLatLngToContainerPixel( mapCenter );
                aPoint.x = aPoint.x + offsetX;
                aPoint.y = aPoint.y + offsetY;
                map.panTo( proj.fromContainerPixelToLatLng( aPoint ) );
            }; 
            ov.draw = function() {}; 
            ov.setMap( this ); 
        };

        from_left = ($this.width() < 940) ? 0 : $this.width() / 4;
        map.setCenterWithOffset( mapCenter, from_left, 0 );
    }

}(this, this.document, this.jQuery));

Answer 1

你需要创建第二个变量，例如。 var map2而不是创建第二个对象： map2 = new google.maps.Map...

在同一页面上创建同一个地图的两个副本

1 个答案: