谷歌地图不以标记为中心

Question

我正在尝试让客户的网站显示一个变量 Google 地图，其地址是通过 WordPress 上的 ACF 地图定义的。

地图本身可以工作，它的中心距离标记所在的位置不远。

但是，我们无法让地图以标记本身为中心，这违背了地图的目的，因为相关公司是一家在网站上列出其物业的物业管理公司。

这是我的函数代码：

<?php
    function my_theme_add_scripts() {
    wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCXO1En_anHPp9eAXyu5ApV50MdHzsDU5c', array(), '3', true );
    wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/google-maps.js', array('google-map', 'jquery'), '0.1', true );
}

add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );

function my_acf_google_map_api( $api ){

    $api['key'] = 'API_KEY_HERE';

    return $api;

}

add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
?>

这是我的 jQuery：

window.map;
(function ($) {
function render_map($el) {

    // var
    var $markers = $el.find('.marker');

    // vars
    var args = {
        zoom: 16,
        center: new google.maps.LatLng('data-lat','data-lng'),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // create map               
    window.map = new google.maps.Map($el[0], args);

    // add a markers reference
    map.markers = [];

    // add markers
    $markers.each(function () {

        add_marker($(this), map);

    });

    // center map
    center_map(map);

}

function add_marker($marker, map) {

    // var
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));

    // create marker
    var marker = new google.maps.Marker({
        position: latlng,
        center: latlng,
        map: map
    });

    // add to array
    map.markers.push(marker);

    // if marker contains HTML, add it to an infoWindow
    if ($marker.html()) {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content: $marker.html()
        });

        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function () {

            infowindow.open(map, marker);

        });
    }

}

function center_map(map) {
    // vars
    var bounds = new google.maps.LatLngBounds();
    // loop through all markers and create bounds
    $.each(map.markers, function (i, marker) {
        var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
        bounds.extend(latlng);
    });
    // only 1 marker?
    if (map.markers.length == 1) {
        // set center of map
        map.setCenter(bounds.getCenter());
        map.setZoom(15);
    } else {
        // fit to bounds
        map.fitBounds(bounds);
    }
}

$(document).ready(function () {
    $('.acf-map').each(function () {
        render_map($(this));
    });

    function center_map(map) {
        // vars
        var bounds = new google.maps.LatLngBounds();
        // loop through all markers and create bounds
        $.each(map.markers, function (i, marker) {
            var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
            bounds.extend(latlng);
        });
    }
});

})(jQuery);

HTML/PHP：

<?php
                $location = get_field('properties_location');
                if( !empty($location) ):
            ?>
            <div class="acf-map">
                <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
            </div>
            <?php endif; ?>

CSS：

.acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}

我猜它可以通过一个简单的 jQuery 修复程序来修复，但我一生都无法弄清楚修复程序是什么。

非常感谢任何帮助。

Answer 1

我发现了我的问题所在。这与显示地图的边界框有关。

我正在属性信息 (screenshot) 下方的选项卡式视图中显示地图。

除非地图可见，否则 Google Maps API 不会运行，因此居中脚本没有运行。

但是，我将所有 Google Maps 渲染 javascript 移动到一个 tab-click 函数中运行，以确保地图的居中被渲染。

果然，在移动代码之后，它现在将标记居中。

我的新javascript/jquery如下：

$('ul.tabs li.map').one('click', function () {
    function render_map($el) {

        // var
        var $markers = $el.find('.marker');

        // vars
        var args = {
            zoom: 17,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // create map               
        window.map = new google.maps.Map($el[0], args);

        // add a markers reference
        map.markers = [];

        // add markers
        $markers.each(function () {

            add_marker($(this), map);

        });

        // center map
        center_map(map);

    }

    function add_marker($marker, map) {

        // var
        var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));

        // create marker
        var marker = new google.maps.Marker({
            position: latlng,
            center: latlng,
            map: map
        });

        // add to array
        map.markers.push(marker);

        // if marker contains HTML, add it to an infoWindow
        if ($marker.html()) {
            // create info window
            var infowindow = new google.maps.InfoWindow({
                content: $marker.html()
            });

            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'click', function () {

                infowindow.open(map, marker);

            });
        }

    }

    function center_map(map) {
        // vars
        var bounds = new google.maps.LatLngBounds();
        // loop through all markers and create bounds
        $.each(map.markers, function (i, marker) {
            var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
            bounds.extend(latlng);
        });
        // only 1 marker?
        if (map.markers.length == 1) {
            // set center of map
            map.setCenter(bounds.getCenter());
            map.setZoom(17);
        } else {
            // fit to bounds
            map.fitBounds(bounds);
        }
    }

    $(document).ready(function () {
        $('.acf-map').each(function () {
            render_map($(this));
        });
    });
});

这仅在第一次单击选项卡时运行代码，以防止每次单击选项卡时重新呈现代码。重新渲染导致地图完全中断。