0

我有与这里提出的相同的问题，但如果没有给出可接受的答案并且我的程序不同，我正在打开一个新的。

我在 Foundation 选项卡中有一张地图，该地图在开始时隐藏，打开时仅显示地图的一部分。我已经阅读了与此相关的问题并尝试了那里的尝试，但没有运气。我知道我必须在标签更改时重新初始化地图，但我无法让它工作。

我有一个保存所有地图信息的函数：

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]

这是在以下 srchttp://maps.gstatic.com/intl/es_ALL/mapfiles/api-3/14/7/main.js

所以是 Google Maps JS 抛出了这个错误，但我不明白为什么。

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

4

1 回答 1

0

You pass a jQuery-element, but google maps needs a HTMLElement. Use

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

instead of

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

Instead of querySelector you can use getElementsByClassName

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

But the always recommended approach is to refer to the map by an 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');
于 2013-10-02T10:10:27.270 回答