使用类选择多个画布时，Google地图不起作用 [英] Google Maps won't work when using classes to select multiple canvases

问题描述

我目前正在构建一个可以动态呈现多个Google地图实例的cms。我目前的做法是找到所有具有gMapsCanvas类的div并为它们中的每个初始化Gmaps。 Google地图的地址是从div的数据地址属性中提取出来的。

HTML示例：

 < div class =gMapsCanvasdata-address =Hauptplatz 22，4002 Linz，Austria>< / div> 
  

CSS：

  .gMapsCanvas 
 {
 width：100％; 
身高：100％; 
 
  

JavaScript

  var GoogleMap = function（canvas，address）
 {
 var _parent = this; 
 
 this.location = new google.maps.LatLng（-34.397,150.644）; 
 
 var options = 
 {
 center：this.location，
 zoom：16，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 mapTypeControlOptions：
 {
 style：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，
 position：google.maps.ControlPosition.TOP_CENTER 
}，
 streetViewControl：false 
}; 
 
 this.map = new google.maps.Map（canvas，options）; 
 
 var geocoder = new google.maps.Geocoder（）; 
 
 geocoder.geocode（{'address'：address}，function（results，status）
 {
 if（status！= google.maps.GeocoderStatus.OK）
 return; 
 
 _parent.location = results [0] .geometry.location; 
 
 var marker = new google.maps.Marker（
 {
 map：_parent.map，
 position：_parent.location 
}）; 
 
 _parent.resize（）; 
}）; 
}; 
 
 GoogleMap.prototype.resize = function（）
 {
 google.maps.event.trigger（this.map，resize）; 
 
 this.map.setCenter（this.location）; 
} 
 
 var Maps =函数（类）
 {
 var _parent = this; 
 
 this.maps = new Array（）; 
 $ b $ classes.each（function（）
 {
 _parent.maps.push（new GoogleMap（$（this）.get（），$（this）.attr（ data-address）））; 
}）; 
}; 
 
 Maps.prototype.resize = function（）
 {
 for（var cnt = 0; cnt< this.maps.length; cnt ++）
 {
 this.maps [cnt] .resize（）; 
} 
}; 
 
 var maps; 
 
 $（window）.load（function（）
 {
 maps = new Maps（$（。gMapsCanvas））; 
}）; 
  

我需要全局的maps变量和resize方法，以便能够全局调整大小地图（我的布局是动态的）。

我的问题是它不起作用：在所有浏览器中，画布保持空白，并且在Firefox中出现以下错误代码：

  NS_ERROR_FAILURE：组件返回失败代码：0x80004005（NS_ERROR_FAILURE）[nsIDOMWindow.getComputedStyle] 
  

当使用标准的getElementById-Method时，所有代码都可以正常工作，所以看起来问题是我使用JQuery的方式选择div。

解决方案

.get（）返回一个数组。

更改：

  _parent.maps.push（新GoogleMap（$（this）.get（），$（this）.attr（data-address）））; 
  

收件人：

  _parent.maps.push（新GoogleMap（$（this）.get（0），$（this）.attr（data-address）））; 
  

工作示例

I'm currently building a cms which should be able to dynamically render several Google Maps instances. My current approach is to find all divs with the class "gMapsCanvas" and initialize Gmaps for each of them. The address of Google Maps is taken out of the div's "data-address" Attribute.

HTML Example:

<div class="gMapsCanvas" data-address="Hauptplatz 22, 4002 Linz, Austria"></div>

CSS:

.gMapsCanvas
{
    width: 100%;
    height: 100%;
}

JavaScript

var GoogleMap = function(canvas, address)
{
    var _parent = this;

    this.location = new google.maps.LatLng(-34.397, 150.644);

    var options = 
    {
        center: this.location,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: 
        {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_CENTER    
        },
        streetViewControl: false
    };

    this.map = new google.maps.Map(canvas, options);

    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': address}, function(results, status) 
    {
        if (status != google.maps.GeocoderStatus.OK)
            return;

        _parent.location = results[0].geometry.location;

        var marker = new google.maps.Marker(
        {
            map: _parent.map,
            position: _parent.location
        }); 

        _parent.resize();
    });
};

GoogleMap.prototype.resize = function() 
{
    google.maps.event.trigger(this.map, "resize");

    this.map.setCenter(this.location);
}

var Maps = function(classes)
{
    var _parent = this;

    this.maps = new Array();

    classes.each(function()
    {
        _parent.maps.push(new GoogleMap($(this).get(), $(this).attr("data-address")));  
    });
};

Maps.prototype.resize = function() 
{
    for (var cnt = 0; cnt < this.maps.length; cnt++) 
    {
        this.maps[cnt].resize();
    }
};

var maps;

$(window).load(function()
{
     maps = new Maps($(".gMapsCanvas"));
});

I need the global "maps" variable and the resize methods so that i'm able to globally resize the maps (my layout is dynamic).

My Problem is that it won't work: In all Browsers, the canvases stay blank and in Firefox, I get following error code:

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

All the code works fine when using the standard "getElementById"-Method, so it seems that the Problem is the way i'm using JQuery to select the divs.

解决方案

.get() returns an array.

Change:

_parent.maps.push(new GoogleMap($(this).get(), $(this).attr("data-address")));  

To:

_parent.maps.push(new GoogleMap($(this).get(0), $(this).attr("data-address")));  

working example

这篇关于使用类选择多个画布时，Google地图不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！