Javascript 谷歌地图不在调整大小的标记上居中_Javascript_Jquery_Css_Google Maps_Google Maps Api 3

Javascript 谷歌地图不在调整大小的标记上居中

javascript jquery css google-maps google-maps-api-3

Javascript 谷歌地图不在调整大小的标记上居中,javascript,jquery,css,google-maps,google-maps-api-3,Javascript,Jquery,Css,Google Maps,Google Maps Api 3,我有一个地图切换，当你打开它时，它不在地图标记的中心。我搜索了所有内容，并尝试了bunch，但无法解决此问题。HTML标记如下所示： <div class="hidden_map_wrapper" data-map_height="450px"> <div class="hidden_map_heading"> <h3>Locate us on map</h3> </div> <div id

我有一个地图切换，当你打开它时，它不在地图标记的中心。我搜索了所有内容，并尝试了bunch，但无法解决此问题。HTML标记如下所示：

<div class="hidden_map_wrapper" data-map_height="450px">
    <div class="hidden_map_heading">
        <h3>Locate us on map</h3>
    </div>
    <div id="google_map_1" data-map_type="ROADMAP" data-auto_center_zoom="0" data-lat="40.7782201" data-lng="-73.9733317" data-zoom="13" data-scrollwheel="0" data-maptypecontrol="1" data-pancontrol="1" data-zoomcontrol="1" data-scalecontrol="1" class="google_map" style="height: 450px; width: 100%; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
        //bunch of map HTML data here
    </div>
    <div class="google_map_marker" data-title="Our Company" data-icon="map_marker.png" data-lat="40.7782201" data-lng="-73.9733317">
    </div>
</div>

map = new google.maps.Map(document.getElementById($current_map.attr('id')),
                                            myOptions);

function initialize_gmap($element) {
    var myLatlng = new google.maps.LatLng($element.data('lat'),$element.data('lng'));
    var auto_center_zoom = ($element.data('auto_center_zoom') == 1 ? true : false);
    var scrollwheel = ($element.data('scrollwheel') == 1 ? true : false);
    var mapTypeControl = ($element.data('maptypecontrol') == 1 ? true : false);
    var panControl = ($element.data('pancontrol') == 1 ? true : false);
    var zoomControl = ($element.data('zoomcontrol') == 1 ? true : false);
    var scaleControl = ($element.data('scalecontrol') == 1 ? true : false);
    var styles = (typeof options !== 'undefined') ? options.custom_map_style : '';
    var map_type = google.maps.MapTypeId.ROADMAP;

    if ($element.data('map_type') == 'SATELLITE') map_type = google.maps.MapTypeId.SATELLITE;
    if ($element.data('map_type') == 'HYBRID') map_type = google.maps.MapTypeId.HYBRID;
    if ($element.data('map_type') == 'TERRAIN') map_type = google.maps.MapTypeId.TERRAIN;

    var mapOptions = {
        zoom: parseInt($element.data('zoom'),10),
        center: myLatlng,
        mapTypeId: map_type,
        styles: jQuery.parseJSON(styles),
        scrollwheel: scrollwheel,
        mapTypeControl: mapTypeControl,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: panControl,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        zoomControl: zoomControl,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: scaleControl,
        scaleControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        streetViewControl: false,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        }
    };

    var elemnt_id = $element.attr('id');
    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById(elemnt_id), mapOptions);

    var c = 0;
    var markers = [];
    var infoWindowContent = [];
    var marker_icons = [];
    $element.siblings('.google_map_marker').each(function(){
        var $marker = $(this);
        markers[c] = [$marker.data('title'), $marker.data('lat'),$marker.data('lng'),$marker.data('icon')];
        infoWindowContent[c] = ['<div class="info_content">' + '<h3>' + $marker.data('title') + '</h3>' + '<p>' + $marker.html() + '</p>' + '</div>'];
        c++;
    });

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: markers[i][3]
        });
        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
    }
    if(auto_center_zoom){
        map.fitBounds(bounds);
    }
}

$('.google_map').each(function(){
    google.maps.event.addDomListener(window, 'load', initialize_gmap($(this)));
});

这样行得通，只是我的记号笔没有居中。我试着重新初始化了整个地图，但是完全没有用。我试着加上

var centerofmap = map_object.getCenter(); 
google.maps.event.trigger(map_object, 'resize'); 
map_object.setCenter(centerofmap);

在我的

进程中

，但这不起作用（得到了关于不存在函数的错误）

我有点困惑。无论我在哪里看到的

map\u对象

都是这样的：

<div class="hidden_map_wrapper" data-map_height="450px">
    <div class="hidden_map_heading">
        <h3>Locate us on map</h3>
    </div>
    <div id="google_map_1" data-map_type="ROADMAP" data-auto_center_zoom="0" data-lat="40.7782201" data-lng="-73.9733317" data-zoom="13" data-scrollwheel="0" data-maptypecontrol="1" data-pancontrol="1" data-zoomcontrol="1" data-scalecontrol="1" class="google_map" style="height: 450px; width: 100%; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
        //bunch of map HTML data here
    </div>
    <div class="google_map_marker" data-title="Our Company" data-icon="map_marker.png" data-lat="40.7782201" data-lng="-73.9733317">
    </div>
</div>

map = new google.maps.Map(document.getElementById($current_map.attr('id')),
                                            myOptions);

function initialize_gmap($element) {
    var myLatlng = new google.maps.LatLng($element.data('lat'),$element.data('lng'));
    var auto_center_zoom = ($element.data('auto_center_zoom') == 1 ? true : false);
    var scrollwheel = ($element.data('scrollwheel') == 1 ? true : false);
    var mapTypeControl = ($element.data('maptypecontrol') == 1 ? true : false);
    var panControl = ($element.data('pancontrol') == 1 ? true : false);
    var zoomControl = ($element.data('zoomcontrol') == 1 ? true : false);
    var scaleControl = ($element.data('scalecontrol') == 1 ? true : false);
    var styles = (typeof options !== 'undefined') ? options.custom_map_style : '';
    var map_type = google.maps.MapTypeId.ROADMAP;

    if ($element.data('map_type') == 'SATELLITE') map_type = google.maps.MapTypeId.SATELLITE;
    if ($element.data('map_type') == 'HYBRID') map_type = google.maps.MapTypeId.HYBRID;
    if ($element.data('map_type') == 'TERRAIN') map_type = google.maps.MapTypeId.TERRAIN;

    var mapOptions = {
        zoom: parseInt($element.data('zoom'),10),
        center: myLatlng,
        mapTypeId: map_type,
        styles: jQuery.parseJSON(styles),
        scrollwheel: scrollwheel,
        mapTypeControl: mapTypeControl,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: panControl,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        zoomControl: zoomControl,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: scaleControl,
        scaleControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        streetViewControl: false,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        }
    };

    var elemnt_id = $element.attr('id');
    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById(elemnt_id), mapOptions);

    var c = 0;
    var markers = [];
    var infoWindowContent = [];
    var marker_icons = [];
    $element.siblings('.google_map_marker').each(function(){
        var $marker = $(this);
        markers[c] = [$marker.data('title'), $marker.data('lat'),$marker.data('lng'),$marker.data('icon')];
        infoWindowContent[c] = ['<div class="info_content">' + '<h3>' + $marker.data('title') + '</h3>' + '<p>' + $marker.html() + '</p>' + '</div>'];
        c++;
    });

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: markers[i][3]
        });
        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
    }
    if(auto_center_zoom){
        map.fitBounds(bounds);
    }
}

$('.google_map').each(function(){
    google.maps.event.addDomListener(window, 'load', initialize_gmap($(this)));
});

但这意味着我正在初始化映射，映射已经在那里，初始化并准备就绪。如果我不把它藏起来，它就能完美地工作。初始化映射的代码如下所示：

<div class="hidden_map_wrapper" data-map_height="450px">
    <div class="hidden_map_heading">
        <h3>Locate us on map</h3>
    </div>
    <div id="google_map_1" data-map_type="ROADMAP" data-auto_center_zoom="0" data-lat="40.7782201" data-lng="-73.9733317" data-zoom="13" data-scrollwheel="0" data-maptypecontrol="1" data-pancontrol="1" data-zoomcontrol="1" data-scalecontrol="1" class="google_map" style="height: 450px; width: 100%; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
        //bunch of map HTML data here
    </div>
    <div class="google_map_marker" data-title="Our Company" data-icon="map_marker.png" data-lat="40.7782201" data-lng="-73.9733317">
    </div>
</div>

map = new google.maps.Map(document.getElementById($current_map.attr('id')),
                                            myOptions);

function initialize_gmap($element) {
    var myLatlng = new google.maps.LatLng($element.data('lat'),$element.data('lng'));
    var auto_center_zoom = ($element.data('auto_center_zoom') == 1 ? true : false);
    var scrollwheel = ($element.data('scrollwheel') == 1 ? true : false);
    var mapTypeControl = ($element.data('maptypecontrol') == 1 ? true : false);
    var panControl = ($element.data('pancontrol') == 1 ? true : false);
    var zoomControl = ($element.data('zoomcontrol') == 1 ? true : false);
    var scaleControl = ($element.data('scalecontrol') == 1 ? true : false);
    var styles = (typeof options !== 'undefined') ? options.custom_map_style : '';
    var map_type = google.maps.MapTypeId.ROADMAP;

    if ($element.data('map_type') == 'SATELLITE') map_type = google.maps.MapTypeId.SATELLITE;
    if ($element.data('map_type') == 'HYBRID') map_type = google.maps.MapTypeId.HYBRID;
    if ($element.data('map_type') == 'TERRAIN') map_type = google.maps.MapTypeId.TERRAIN;

    var mapOptions = {
        zoom: parseInt($element.data('zoom'),10),
        center: myLatlng,
        mapTypeId: map_type,
        styles: jQuery.parseJSON(styles),
        scrollwheel: scrollwheel,
        mapTypeControl: mapTypeControl,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: panControl,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        zoomControl: zoomControl,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: scaleControl,
        scaleControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        streetViewControl: false,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        }
    };

    var elemnt_id = $element.attr('id');
    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById(elemnt_id), mapOptions);

    var c = 0;
    var markers = [];
    var infoWindowContent = [];
    var marker_icons = [];
    $element.siblings('.google_map_marker').each(function(){
        var $marker = $(this);
        markers[c] = [$marker.data('title'), $marker.data('lat'),$marker.data('lng'),$marker.data('icon')];
        infoWindowContent[c] = ['<div class="info_content">' + '<h3>' + $marker.data('title') + '</h3>' + '<p>' + $marker.html() + '</p>' + '</div>'];
        c++;
    });

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: markers[i][3]
        });
        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
    }
    if(auto_center_zoom){
        map.fitBounds(bounds);
    }
}

$('.google_map').each(function(){
    google.maps.event.addDomListener(window, 'load', initialize_gmap($(this)));
});

它将用于调整大小。

首先制作

var-map

global

var map;    
function initialize_gmap($element) {
    var myLatlng = new google.maps.LatLng($element.data('lat'),$element.data('lng'));
    var auto_center_zoom = ($element.data('auto_center_zoom') == 1 ? true : false);
    var scrollwheel = ($element.data('scrollwheel') == 1 ? true : false);
    var mapTypeControl = ($element.data('maptypecontrol') == 1 ? true : false);
    var panControl = ($element.data('pancontrol') == 1 ? true : false);
    var zoomControl = ($element.data('zoomcontrol') == 1 ? true : false);
    var scaleControl = ($element.data('scalecontrol') == 1 ? true : false);
    var styles = (typeof options !== 'undefined') ? options.custom_map_style : '';
    var map_type = google.maps.MapTypeId.ROADMAP;

    if ($element.data('map_type') == 'SATELLITE') map_type = google.maps.MapTypeId.SATELLITE;
    if ($element.data('map_type') == 'HYBRID') map_type = google.maps.MapTypeId.HYBRID;
    if ($element.data('map_type') == 'TERRAIN') map_type = google.maps.MapTypeId.TERRAIN;

    var mapOptions = {
        zoom: parseInt($element.data('zoom'),10),
        center: myLatlng,
        mapTypeId: map_type,
        styles: jQuery.parseJSON(styles),
        scrollwheel: scrollwheel,
        mapTypeControl: mapTypeControl,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: panControl,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        zoomControl: zoomControl,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: scaleControl,
        scaleControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        streetViewControl: false,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        }
    };

    var elemnt_id = $element.attr('id');
    var bounds = new google.maps.LatLngBounds();
////////////////////////
////// map is global ///
////////////////////////
/////////////////////////
    map = new google.maps.Map(document.getElementById(elemnt_id), mapOptions);

    var c = 0;
    var markers = [];
    var infoWindowContent = [];
    var marker_icons = [];
    $element.siblings('.google_map_marker').each(function(){
        var $marker = $(this);
        markers[c] = [$marker.data('title'), $marker.data('lat'),$marker.data('lng'),$marker.data('icon')];
        infoWindowContent[c] = ['<div class="info_content">' + '<h3>' + $marker.data('title') + '</h3>' + '<p>' + $marker.html() + '</p>' + '</div>'];
        c++;
    });

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: markers[i][3]
        });
        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
    }
    if(auto_center_zoom){
        map.fitBounds(bounds);
    }
}

$('.google_map').each(function(){
    google.maps.event.addDomListener(window, 'load', initialize_gmap($(this)));
});

google.maps.event.addListener（映射对象'resize'，函数（）{//recenter here the map on the marker}）；此外，

var map

必须是全局的，如何重新居中标记？手动？我尝试添加

var centerofmap=map\u object.getCenter（）map\u object.setCenter（centerofmap），但我一直得到未捕获类型错误：map\u object.getView不是一个函数
否，您必须将地图居中于标记而不是地图中的标记。所以：var center=new google.maps.latLng（marker.lat（），marker.lng（）），这是你的中心，不使用map\u对象
，使用map
并使其全球化你得到了什么？我假设您更改了标记
以获得一个实际有效的对象使其工作？好的，我让它工作了，但我只是使用了var centerofmap=map.getCenter（）；google.maps.event.trigger（映射，'resize'）；地图设置中心（地图中心）代码，我猜因为地图是全局的，所以现在可以工作了。谢谢你的提示！