使用标记在响应式调整大小时将 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 中以使其居中.我正在使用此处的代码进行地图居中... Google 地图响应式调整大小

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();
});

文档中对空闲"事件的描述:

Description of the 'idle' event from the doc:

当地图在平移或缩放后空闲时会触发此事件.

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

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