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

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>

标签： javascripthtmlgoogle-mapsgoogle-maps-api-3geolocation

Answer 1

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

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

希望这可以帮助！