如何在谷歌地图中自动设置信息窗口内容答案

【问题标题】：how to auto set infowindow content in google map如何在谷歌地图中自动设置信息窗口内容
【发布时间】：2020-04-12 01:43:41
【问题描述】：

当标记位于顶部时，如果我单击标记位置，则会设置地图中心，但我不想从顶部更改地图位置
当我像这样从底部单击时，我会自动转到顶部位置看到此图像：actual 但我想滚动像这样expected
左右根据自动位置正常工作

注意：信息窗口内容从底部而不是从顶部显示

看看我的 js fiddle

function initMap() {

        var mapProp = {
            center: new google.maps.LatLng(52.922592, -1.474605),//set the centre of the map. In my case it is the same as the position of the map pin.
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"), mapProp);

        var html = '<li class="list-group-item">' +
            '<a id="exampleMenu1">' +
            '<div class="context">Example 1</div>' +
            '</a>' +
            '</li>' +
            '<li class="list-group-item">' +
            '<a id="exampleMenu2">' +
            '<div class="example">Example 2</div>' +
            '</a>' +
            '</li>' +
            '<li class="list-group-item">' +
            '<a id="exampleMenu3">' +
            '<div class="example">Example 3</div>' +
            '</a>' +
            '</li>' +
            '<li class="list-group-item">' +
            '<a id="exampleMenu4">' +
            '<div class="example">Example 4</div>' +
            '</a>' +
            '</li>' +
            '<li class="list-group-item">' +
            '<a id="exampleMenu5">' +
            '<div class="example">Example 5</div>' +
            '</a>' +
            '</li>';


        var infowindow = new google.maps.InfoWindow({
            content: html
        });


        //Create a marker pin to add to the map
        var marker;
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(52.922592, -1.474605),//set the position of the pin
            map: map,
            //title: "Derby",
            icon: "http://www.codeshare.co.uk/images/blue-pin.png", //if you comment this out or delete it you will get the default pin icon.
            animation: google.maps.Animation.DROP
        });

        marker.addListener('click', function () {
            infowindow.open(map, marker);
        });
    }
    
  //  google.maps.event.addDomListener(window, 'load', initMap);

#map {
            width: 100%;
            height: calc(100vh);
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .gm-style .gm-style-iw-c {
            position: absolute;
            box-sizing: border-box;
            overflow: hidden;
            top: 200px;
            left: 58px;
            transform: translate(-50%,-100%);
            background-color: white;
            border-radius: 8px;
            padding: 12px;
            box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3);
        }
        .gm-style .gm-style-iw-t::after {
           display: none;
        }

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

【问题讨论】：

有什么问题？？
O.o 我已经在问题上提到了
很抱歉，我看不出您的信息窗口当前的外观与您期望的外观之间有什么区别。您能否澄清或进一步解释您当前的信息窗口有什么问题以及您要更改/修复什么？
@evan 当我单击标记时，地图应根据标记信息窗口内容自动滚动（上、右、下、左）。例如：如果标记位于屏幕底部，则单击然后它应该在markerinfowindow内容正确显示的内容显示底部的顶部..
谢谢，我想我现在明白你的意思了，请查看我的回答，如果这确实是你想要的，请告诉我。如果不是，请进一步澄清，我会相应地修改我的答案。谢谢！

标签： javascript html google-maps google-maps-api-3 geolocation

【解决方案1】：

所以您要做的是在单击标记时将地图置于信息窗口的中心，对吗？在这种情况下，您可以按如下方式修改您的点击事件侦听器：

    marker.addListener('click', function () {
        infowindow.open(map, marker);
        map.setCenter(infowindow.getPosition());
    });

希望这会有所帮助！

【讨论】：