Question

我在制作goole地图时遇到了问题。我使用简单的切换来打开地图，但我只看到地图的一部分。

然后我使用acf（高级自定义字段）进行wordpress来显示地图。但我已经看到切换与谷歌api冲突。

这是结果的标记：

以下是代码：

/*toggle*/

$(document).ready(function () {
        $('.acf-map').hide();
         $('a.togglelink-map').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.acf-map')
        $('.acf-map').not(elem).hide('fast');
        elem.toggle('fast');
    });
});


/*acf render map*/

(function ($) {

/*
 *  render_map
 *
 *  This function will render a Google Map onto the selected jQuery element
 *
 *  @type    function
 *  @date    8/11/2013
 *  @since   4.3.0
 *
 *  @param   $el (jQuery element)
 *  @return  n/a
 */

var map;

function render_map($el) {

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

    // vars
    var args = {
        zoom: 16,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // create map               
    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);
}

/*
 *  add_marker
 *
 *  This function will add a marker to the selected Google Map
 *
 *  @type    function
 *  @date    8/11/2013
 *  @since   4.3.0
 *
 *  @param   $marker (jQuery element)
 *  @param   map (Google Map object)
 *  @return  n/a
 */

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

        });
    }

}

/*
 *  center_map
 *
 *  This function will center the map, showing all markers attached to this map
 *
 *  @type    function
 *  @date    8/11/2013
 *  @since   4.3.0
 *
 *  @param   map (Google Map object)
 *  @return  n/a
 */

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(16);
    } else {
        // fit to bounds
        map.fitBounds(bounds);
    }

    $(document).on('click', '.map', function () {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(bounds.getCenter());
        map.setZoom(16);
    });

}

/*
 *  document ready
 *
 *  This function will render each map when the document is ready (page has loaded)
 *
 *  @type    function
 *  @date    8/11/2013
 *  @since   5.0.0
 *
 *  @param   n/a
 *  @return  n/a
 */

$(document).ready(function () {

    $('.acf-map').each(function () {

        render_map($(this));

    });

});
})(jQuery);

这是content.php

中的代码

<?php $location = get_field('luogo'); if($location['address']) { ?>
<a href="#" class="togglelink-map">accedi</a>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"  itemprop="map"></div>
</div>
<?php } ?>

Answer 1

基本问题是map-div在创建地图时没有大小。

最简单的方法是在切换地图时触发窗口的调整大小事件（看一下最后一行）：

$(document).ready(function () {
        $('.acf-map').hide();
         $('a.togglelink-map').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.acf-map')
        $('.acf-map').not(elem).hide('fast');

        elem.toggle('fast',function(){google.maps.event.trigger(window,'resize')});
    });
});

问题：地图不会在所需位置居中，并且没有地图实例的句柄来应用居中。

另一种方法：

触发map-div的自定义事件：

$(document).ready(function () {
        $('.acf-map').hide();
         $('a.togglelink-map').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.acf-map')
        $('.acf-map').not(elem).hide('fast');

        elem.toggle('fast',function(){google.maps.event.trigger(this,'toggle');});

    });
});

在render_map中定义此自定义事件的处理程序：

    map = (function (o, a) {
        var m = new google.maps.Map(o, a);
        google.maps.event.addListener(o, 'toggle', function () {
            var c = m.getCenter();
            google.maps.event.trigger(m, 'resize');
            if(!m.get('centered')){
               m.setCenter(c);
               m.set('centered',1);
            }
        });
        return m;
    })($el[0], args);

演示：http://jsfiddle.net/doktormolle/3rQuk/

谷歌地图切换

1 个答案: