Question

我和问here有同样的问题，但是没有给出接受的答案，而且我的程序不同，我正在开一个新的。

我在基础选项卡中有一个地图，它在开头隐藏，只在打开时显示地图的一部分。我已经阅读了与此相关的issues并尝试了尝试，但没有运气。我知道我必须在标签更改时重新初始化地图，但我无法使其正常工作。

我有一个包含所有地图信息的函数：

function startMap(obj){
    var markers = new Array();
    var glat_center = $(obj).attr('data-glat');
    var glong_center = $(obj).attr('data-glong');
    var Latlng_center = new google.maps.LatLng(glat_center, glong_center);
    var mapOptions = {
      zoom: zoom,
      scrollwheel: false,
      center: Latlng_center,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: mapStyles,
      mapTypeControl: false, 
      streetViewControl: false,
      minZoom: 4,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_RIGHT
      }
    };
    var map = new google.maps.Map(obj, mapOptions);
    if($(obj).attr('data-glat') && $(obj).attr('data-glong')){
        var glat = $(obj).attr('data-glat');
        var glong = $(obj).attr('data-glong');
        var Latlng = new google.maps.LatLng(glat, glong);
            var marker = new google.maps.Marker({
            position: Latlng,
            map: map
        });
    }
}

我的html标记看起来像这样

<div class="tabs" data-section="auto">
<!--two more tabs here-->
<section class="property-location">
    <a href="#" class="title" data-section-title>Title</a>
        <div class="tab-content" data-slug="section3" data-section-content>
        <div class="google-map" data-glat="123456" data-glong="123456" style="width: 100%; height: 440px;">
    </div>
        </div>
</section>
</div>

那么，我正在尝试做的是在单击选项卡时调用此函数，因为我在Foundation文档中找不到任何其他选项卡事件。首先，我找到包含地图的选项卡的.title，然后查看地图是否存在（以防万一），然后我在持有地图的div上调用该函数。

$('.tabs .property-location').find('.title').click(function() {
    if(($('.tab-content').find('.google-map')).length) {
        //console.log('I found a map');
        startMap($('.google-map'));
    }
});

我知道它正在查找地图，因为我在console.log它，但是控制台抛出了这个错误

NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]

位于以下src http://maps.gstatic.com/intl/es_ALL/mapfiles/api-3/14/7/main.js

上

因此，谷歌地图JS正在抛出此错误，但我无法理解原因。

我知道这很难，但有什么想法吗？

Answer 1

您传递了jQuery元素，但Google地图需要HTMLElement。使用

var map = document.querySelector('.google-map');
startMap(map);

而不是

startMap($('.google-map'));

您可以使用querySelector

代替getElementsByClassName

var map = document.getElementsByClassName('google-map')[0];

但始终建议的方法是通过id：

来引用地图

<div id="the-google-map" class="google-map" data-glat="123456" data-glong="123456" style="width: 100%; height: 440px;"></div>

var map = document.getElementById('the-google-map');

Google地图未显示在基础部分中

1 个答案: