Google Maps API v.3 - 如何在点击时从标记平移到 Top_Left (X,Y)

Question

这是我的代码

function init_map() {

    var bounds = new google.maps.LatLngBounds();
    var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(31.75664276376096, 35.56389920898436),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);

    var locations = [
        ['Name1', 0, 0],
        ['Name2', 1, 1]
    ];

    var infoWindowContent = ['some content here']

    var infoWindow = new google.maps.InfoWindow(),
        marker, i;

    for (i = 0; i < locations.length; i++) {

        var position = new google.maps.LatLng(locations[i][1], locations[i][2]);

        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            icon: './images/content/mapPin.png',
            title: locations[i][0]
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {

                map.panTo(marker.getPosition());
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);

                var iwOuter = jQuery('.gm-style-iw');

                var iwBackground = iwOuter.prev();

                iwBackground.children(':nth-child(2)').css({
                    'display': 'none'
                });

                iwBackground.children(':nth-child(4)').css({
                    'display': 'none'
                });

                var ceva = jQuery(window).width();

                if(ceva <= 400){
                    iwOuter.parent().parent().css({
                        'left': '0',
                        'top': '0'
                    });
                    iwOuter.children(':nth-child(1)').addClass('gm-style-child').css({
                        'width': '100%'
                    });
                } else if (ceva <= 768) {
                    iwOuter.parent().parent().css({
                        'left': '15px',
                        'top': '0'
                    });
                    map.panTo(marker.getPosition());

               } else {
                    iwOuter.parent().parent().css({
                        'left': '220px',
                        'top': '180px'
                    });
               }

               iwOuter.parent().css({
                   'width': '260px'
               });

               iwOuter.children().css({
                   'max-height': 'none',
                   'overflow': 'visible'
               });

               iwOuter.children().children().css({
                   'overflow': 'visible'
               });

               iwBackground.children(':nth-child(1)').css({
                   'display': 'none'
               });

               iwBackground.children(':nth-child(3)').find('div').children().css({
                   'display': 'none'
               });

               var iwCloseBtn = iwOuter.next();

               iwCloseBtn.addClass('close-icon').css({
                       'display': 'none'
               });
            }
        })(marker, i));

        map.fitBounds(bounds);
    }

    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(8);
        google.maps.event.removeListener(boundsListener);
    });
}
google.maps.event.addDomListener(window, 'load', init_map);

我从标记右侧弹出 infoWindow。每当我单击 mapPin 时，它都会将地图置于图钉的中心。

map.panTo(marker.getPosition());

所以我想要的是，当我单击标记以将地图稍微向左和顶部移动时。所以标记会出现在顶部，可能会出现 -100 x 偏移量，所以当我单击标记时 - 弹出窗口将可见，您无需拖动地图即可查看弹出窗口中的所有信息。

我会添加一些图片以便更好地理解。

现在看起来像这样。

我想要这样的东西只适用于桌面版，而对于移动版来说，它可以完美运行。

有没有人知道如何实现这一点。谢谢！

Answer 1

我找到了答案。我所要做的就是将 disableAutoPan 添加到 infoWindow

var infoWindow = new google.maps.InfoWindow({
    disableAutoPan: true
}),