Question

我对Google地图的包装器有疑问。该类由文档设置为display:none。如果我点击链接，必须在show（）上设置地图。它有效，但地图显示不正确。

以下是截图：

enter image description here

这是我的JSFiddle示例。

这是我的HTML代码：

<a href="#" class="advertise-map">show map</a>

<div class="advertise-mapper">
        <div class="responsiveContaineradv">
      <div id="map-canvas" class="map-adver"></div>
  </div>
</div>

这是我的JS代码：

jQuery(document).ready(function() {

    jQuery(document).on("click", ".advertise-map", function(e) {
        e.preventDefault();
        jQuery('.advertise-mapper').show();
    });

});

var map;

function initialize() {

    var locations = [
        ['<h4>BMX Golden MILE 20 Fahrrad</h4>250.00 €<br><a href="/kleinanzeigen/umkreissuche.html++/anzeige/4700879709943/">zur Kleinanzeige</a>', 51.4627921, 6.9787572],
        ['<h4>Apple Macbook Air 13 A1466 Juni 2013</h4>800.00 €<br><a href="/kleinanzeigen/umkreissuche.html++/anzeige/62217508741/">zur Kleinanzeige</a>', 51.665041, 7.631431],
        ['<h4>Apple iPod nano 16 GB Grün 6. Generation</h4>60.00 € VB<br><a href="/kleinanzeigen/umkreissuche.html++/anzeige/06618901051/">zur Kleinanzeige</a>', 51.5096015, 7.377755],
    ];
    var myLatlng = new google.maps.LatLng(51.513587, 7.465298);

    var mapOptions = {
        zoom: 11,
        center: myLatlng
    }

    var infowindow = new google.maps.InfoWindow({
        maxWidth: 360
    });

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var markers = new Array();

    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            animation: google.maps.Animation.DROP
        });

        markers.push(marker);

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

    function autoCenter() {
        //  Create a new viewpoint bound
        var bounds = new google.maps.LatLngBounds();
        //  Go through each...
        for (var i = 0; i < markers.length; i++) {
            bounds.extend(markers[i].position);
        }
        //  Fit these bounds to the map
        map.fitBounds(bounds);
    }
    autoCenter();

}

google.maps.event.addDomListener(window, 'load', initialize);

如何在显示时正确显示地图？

Answer 1

我会做一些小修正，其中最重要的是goecodezip在评论中提到。

在您的.advertise-map的onclick中，添加地图调整大小（重要）和自动中心（可选）。

jQuery(document).on("click",".advertise-map",function(e){
    e.preventDefault();
    jQuery('.advertise-mapper').show();
    google.maps.event.trigger(map, "resize");
    autoCenter();
});

接下来，我将'markers'设为全局变量：

var map;
var markers = new Array();

最后，我将autoCenter（）函数从initialize函数中移出。

通过所有这些更改，我相信这正是您所寻找的：http://jsfiddle.net/2xn7wywo/22/

Google地图无法显示任何文档

1 个答案: