使用标记将响应式调整大小定位到Google地图 [英] Centering Google Maps on responsive resize with marker

问题描述

我试图让Google地图在响应地调整大小时保持其中心位置。

I'm trying to get Google Maps to keep its center when resizing responsively.

我已经设法让地图居中，但无法解决如何将标记添加回JS以使其居中。我使用这里的代码来进行地图居中...... 谷歌地图响应式调整大小

I've managed to get the map to center but can't work out how to add my marker back in to the JS to make it center too. I'm using the code from here for the map centering... Google maps responsive resize

var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(LAT,LNG),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        scrollwheel: false,
        keyboardShortcuts: false,
    };

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);}

google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

我用来居中地图的代码在上面。

The code I am using to center the map is above. I have the marker code below too, but I'm not sure how to add it to make it keep its center too.

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(LAT,LNG),
        map: map,
        title: 'Title',
        animation: google.maps.Animation.DROP,
        })
    }

任何人都可以帮忙吗？

推荐答案

这是获取您想要的第一步：

Here is a first step to get what you want to do:

var map; //<-- This is now available to both event listeners and the initialize() function
var mapCenter; // Declare a variable to store the center of the map
var centerMarker; // declare your marker

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(LAT,LNG),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        scrollwheel: false,
        keyboardShortcuts: false,
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    // Create a new marker and add it to the map
    centerMarker = new google.maps.Marker({
        position: new google.maps.LatLng(LAT,LNG),
        map: map,
        title: 'Title',
        animation: google.maps.Animation.DROP
    });

    mapCenter = map.getCenter(); // Assign the center of the loaded map to the valiable
}



google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addDomListener(window, "resize", function() {

    // Here you set the center of the map based on your "mapCenter" variable
    map.setCenter(mapCenter); 
});

编辑：基于@Chad Killingsworth评论：
您可能需要向地图添加一个'空闲'事件处理程序来设置 mapCenter 变量。你可以这样做：

Based on @Chad Killingsworth comment: You may want to add an 'idle' event handler to the map to set the mapCenter variable. You can achieve this like this:

google.maps.event.addListener(map,'idle',function(event) {
    mapCenter = map.getCenter();
});

文档中'idle'事件的描述：

Description of the 'idle' event from the doc:

在平移或缩放后地图变为闲置时会触发此事件。

This event is fired when the map becomes idle after panning or zooming.

这篇关于使用标记将响应式调整大小定位到Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！