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

Question

1. 当标记是顶部时，如果我单击然后标记位置设置地图中心，但我不想从顶部更改地图位置

2. 当我像这样从底部单击时，我将转到顶部位置自动看到此图像：实际但我想滚动 像这样自动地在顶部位置上

3. 根据自动位置左右工作正常

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

看我的 JS 小提琴

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>

Answer 1

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

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

希望这有帮助！