Question

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

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

但是，我们无法将地图置于标记本身的中心位置，因为有关公司是一家在网站上列出其财产的物业管理公司，因此无法实现地图的目的。

这是我的功能代码：

 import {PLATFORM } from 'aurelia-framework';

export class CustomerTypeViewValueConverter  {
    toView(type: string) {
     return  type  == 'LEGAL' ? PLATFORM.moduleName("./createLEGALcustomer.html") : PLATFORM.moduleName("./createNATURALcustomer.html")
    }
  }

这是我的jQuery：

<?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');
?>

HTML / PHP：

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

CSS：

<?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; ?>

我猜它可以通过一个简单的jQuery修复来修复，但我不能为我的生活弄清楚修复是什么。

非常感谢任何帮助。

Answer 1

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

我在属性信息（screenshot）下的标签视图中显示地图。

由于除非地图可见，否则Google Maps API无法运行，因此中心脚本未运行。

但是，我移动了所有Google地图渲染javascript，以便在标签点击功能中运行，以确保渲染地图的居中。

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

我的新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));
        });
    });
});

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

Google地图不以标记为中心

1 个答案: