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
}),

谷歌地图API v.3 - 如何从点击标记panTo Top_Left（X，Y）

1 个答案: