加载后，将Google地图的中心视图重新定位到infoWindow的像素位置

Question

我在一个页面上有一个带有几个标记(ajax'ed(的googlemap。当我单击标记时，Info窗口在其中打开了详细信息(也是Ajax'ed(。

我不知道如何将地图中心以将此信息窗口放在地图的中间。

googlemap像这样加载：

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: zoomSteps[0],
    center: new google.maps.LatLng(46.227638, 2.213749000000007),
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    mapTypeControl: false,
    streetViewControl: false,
    styles: [{
        featureType: "poi",
        stylers: [{
            visibility: "off"
        }]
    }]
});

另外，InfoWindow GOOGLEMAP对象是这样生成的：

var infowindow = new google.maps.InfoWindow({
    maxWidth: 400,
});

i然后执行AJAX请求以获取数据以在success: function(data) {}中的地图上定位标记：

for (i = 0; i < data.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[i].latitude, data[i].longitude),
        map: map
    });
    // ...
}

在此for() {}循环中，我在生成的marker上添加EventListener：

google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {
        // open the info window
        infowindow.open(map, marker); 
        // get css load spinner HTML from ajax and populate a div
        var $loader = $('<div/>').addClass('loader').css('overflow', 'hidden').html(data[i].htmlLoader); 
        // inject this div html code into the infowindow
        infowindow.setContent($loader.prop('outerHTML')); 
        // (1)
        // Main function to retrieve data from the SOAP WebService :
        // it takes infoWindow html template from data[i].htmlTemplate,
        // populates it with data fetched from SOAP WebService and sends it back to here        
        MainSearchTool.prototype.loadEntityResults(data[i].ws.data, data[i].htmlTemplate, function (htmlTemplate) {
            // inject newly fetched results into the infowindow
            infowindow.setContent(htmlTemplate);
            /**
             * Here is where I would like to reposition the center
             * of the map to fit the infoWindow 
             * (2)
             */
        });
    }
})(marker, i));

在(2)中，我尝试(无用(到：

1. LatLng致电map.setCenter(LatLng)为marker.getPosition()-在(1)中调用时起作用，但InfowDindow填充了加载旋转器，而不是目前的最终模板；
2. 根据这个问题，将InfowDindow offset()向左转，然后将其转换为new google.maps.Point()，然后将其转换回LatLng对象；
3. 使用多种技术根据特定值重新定位map;

看来我找不到任何特定的方法来使地图根据 LatLng对象与InfowDindow的中心相匹配。

随时询问您可能会发现有用的任何添加信息。

谢谢。

Answer 1

没事。

在(2)中再次致电infowindow.open(map, marker);做技巧。

以获取进一步的参考。

Answer 2

无论如何，让我以问题的精神回答：已知大小Infowdow，已知尺寸图。我在CSS中设置了这些值，请参见代码

单击地图后，我们读取标记的位置；将该位置转换为相应的像素；我们将像素距离标记添加到中间窗中；我们将该点转换为坐标，然后将地图居中。

对于我的代码，这意味着我们必须将地图100像素(y方向(居中。您可能需要为您的值计算TAT距离的功能(如果您不固定尺寸，则可能动态地(

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script>
    // @see https://stackoverflow.com/questions/25219346/how-to-convert-from-x-y-screen-coordinates-to-latlng-google-maps
    function latLng2Point(latLng, map) {
        var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
        var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
        var scale = Math.pow(2, map.getZoom());
        var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
        return new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
    }
    function point2LatLng(point, map) {
        var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
        var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
        var scale = Math.pow(2, map.getZoom());
        var worldPoint = new google.maps.Point(point.x / scale + bottomLeft.x, point.y / scale + topRight.y);
        return map.getProjection().fromPointToLatLng(worldPoint);
    }
    var map;
    var markers = [];
    var infowindow;
    function senterOnInfowindow(infowindow, marker) {
        var markerposition = marker.getPosition();
        // let's add pixels to that to the north: Y-offset + half the height of the infowindow
        var xy = latLng2Point(markerposition, map);
        xy.x += 0; // if needed, ajust x
        xy.y -= 100;
        var newCenter = point2LatLng(xy, map);
        map.setCenter(newCenter);
    }
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 19,
            center: new google.maps.LatLng(46.227638, 2.213749000000007),
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            mapTypeControl: false,
            streetViewControl: false
        });
        // place a few markers
        var markerlocations = [
            [46.2276, 2.2137, 'location 1'],
            [46.2277, 2.2136, 'location 2'],
            [46.2278, 2.2135, 'location 3'],
            [46.2279, 2.2134, 'location 4']
        ];
        for (var i in markerlocations) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(markerlocations[i][0], markerlocations[i][1]),
                title: markerlocations[i][2],
                map: map
            });
            markers.push(marker);
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow = new google.maps.InfoWindow({
                        width: 400,
                        height: 300,
                        content: '<div id="mydiv">' + markerlocations[i][2] + '</div>'
                    });
                    infowindow.open(map, marker);
                    //senterOnInfowindow(infowindow, marker)
                }
            })(marker, i));
        }
    }
    window.onload = initMap;
</script>
<style>
    #mydiv {
        height: 100px;
        width: 200px;
    }
    #map {
        height: 500px;
        width: 700px;
    }
</style>
<div id="map"></div>