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

新开发

这实际上是我的代码,但是现在我想创建该地图的副本,完全相同,但是会更小一些,并且在某些窗口大小下会被隐藏。

我必须如何更改代码才能实现该目标?
(也在#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));
马特乌斯·保斯基(Mateusz Paulski)

您需要创建第二个变量,例如。var map2,然后创建第二个对象:map2 = new google.maps.Map...

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

同一页面上的两个圆环图

同一页面上的多个 Ngx-leaflets 地图:所有图块都显示在同一地图上

如何为同一页面上的两个表单定义唯一的validateForm?

当我尝试在同一页面上创建两个滑块框时,它不起作用

是否可以在同一页面上运行两个不同版本的ReactJS?

动态填充同一页面上其他两个选择的选择

提交在同一页面上呈现的两个不相关的表单

同一页面上的两个 Off Canvas 侧边栏

Inno Setup禁用同一页面上的两个按钮

无法从 chart.js 在同一页面上呈现两个图表

在ChakraUI中使用useDisclosure()无法在同一页面上使用两个模式

Angular两个应用程序在同一页面上

同一页面上的两个相似对象

PHP在同一页面上的两个脚本之间传递数据

如何在同一页面上放置两个自举轮播?

无法在同一页面上运行两个Bootstrap模态

同一页面上的两个 Promise.all()

React Router问题:React在同一页面上渲染两个组件

同一页面上的两个不同的Yammer共享按钮

同一页面上的两个详细视图?

使用react-hook-form在同一页面上添加两个表单

我希望同一页面上的两个Flexslider以不同的速度运行

验证同一页面上的两个表单

如何在同一页面上放置两个幻灯片框?

Python请求-在同一页面上发送两个请求?

同一页面上的两个范围滑块 - Rangeslider.js

在同一页面上的两个输入(差异ID)上的两个自动完成

当我在同一页面上有两个图D3.js时宽度异常

如何在同一页面上拥有同一手风琴的两个副本的同时,保持每个手风琴的第一个链接处于打开状态