包装谷歌地图时出现问题 - 无法读取未定义的属性'x'

Question

我正在尝试将Google Maps JavaScript API包裹在JavaScript类中，我可以在WebApp中的多个位置重复使用。底部的代码包含概念的基础知识。完成此工作后，我将在我的..映射类中添加更多逻辑，以自动从API中添加标记等。

这个想法是，一个或多个地图的页面在底部具有类似脚本。

<script>
  $(function () {
    var map1 = new My.Map('#map1Canvas', { zoom: 10 });
    var map2 = new My.Map('#map2Canvas');
    My.Map.renderAll('MyGoogleMapsApiKeyGoesHere');
  }); 
</script>

当我运行此代码时，DIV是部分初始化的 - 获取边框和灰色背景。但是，它们不会完全初始化，当我单击或拖动它们时，我会在控制台中遇到错误。

Uncaught TypeError: Cannot read property 'x' of undefined

在各个地方添加Console.log((语句告诉我，Google Maps API的标签的动态插入正在运行和MAP._RENDERALDALLCALLBACK((正在运行。我还看到两个实例中的每个实例中的每个实例都会进行一次Google.maps.map((呼叫。如果我只启动其中一个(即评论" var map2 = ..."行(，我会得到相同的。

有什么想法我要去哪里？

"我的"库的代码在下面。

(function(global) {
    Map._maps = {};
    function Map(selector, opts) {
        this.selector = selector;
        this.opts = opts || {};
        this.gmaps = []; 
        if (selector in Map._maps) {
            throw new Error("Duplicate My.Map selector; ""+selector+""!");
        }
        Map._maps[selector] = this;
    }   
    Map.prototype = {
        selector: null,
        opts: {}, 
        constructor: Map,
        _render: function() {
            var that = this 
            $(this.selector).each(function(idx, el) {
                that.gmaps.push(new google.maps.Map(el, that.opts));
            }); 
        }   
    };
    Map.renderAll = function(mapsKey) {
        if (!mapsKey) { throw new Error("Missing Google Maps API Key!"); }
        var script = $('<script>', {
            type: 'text/javascript',
            src: 'https://maps.googleapis.com/maps/api/js?key='
                 + mapsKey + '&callback=My.Map._renderAllCallback'
        });
        script[0].setAttribute('async', '');
        script[0].setAttribute('defer', '');
        $(document.body).append(script);
    };
    Map._renderAllCallback = function() {
        console.log("Callback() _maps", Map._maps);
        for (var key in Map._maps) {
            if (Map._maps.hasOwnProperty(key)) {
                console.log("Callback() key", key, Map._maps[key]);
                Map._maps[key]._render();
            }
        }
    };
    global.My = {
        Map: Map,
    };
})(this);

Answer 1

您未正确初始化地图。有两个必需的参数：zoom和center。您可以使用fitBounds操作或以自动缩小和中心的对象初始化(例如DirectionsService或Kmllayer等(。

(。

这对我有用：

$(function () {
  var map1 = new My.Map('#map1Canvas', { zoom: 10, center: {lat: 45, lng:-72 } });
  var map2 = new My.Map('#map2Canvas', { zoom: 10, center: {lat: 45, lng:-112 } });
  My.Map.renderAll();
}); 

概念证明小提琴

代码段：

(function(global) {
  Map._maps = {};
  function Map(selector, opts) {
    this.selector = selector;
    this.opts = opts || {};
    this.gmaps = [];
    if (selector in Map._maps) {
      throw new Error("Duplicate My.Map selector; "" + selector + ""!");
    }
    Map._maps[selector] = this;
  }
  Map.prototype = {
    selector: null,
    opts: {},
    constructor: Map,
    _render: function() {
      var that = this
      $(this.selector).each(function(idx, el) {
        that.gmaps.push(new google.maps.Map(el, that.opts));
      });
    }
  };
  Map.renderAll = function(mapsKey) {
    // keys not currently required on SO or jsfiddle
    // if (!mapsKey) { throw new Error("Missing Google Maps API Key!"); }
    var script = $('<script>', {
      type: 'text/javascript',
      src: 'https://maps.googleapis.com/maps/api/js?callback=My.Map._renderAllCallback'
    });
    script[0].setAttribute('async', '');
    script[0].setAttribute('defer', '');
    $(document.body).append(script);
  };
  Map._renderAllCallback = function() {
    for (var key in Map._maps) {
      if (Map._maps.hasOwnProperty(key)) {
        Map._maps[key]._render();
      }
    }
  };
  global.My = {
    Map: Map,
  };
})(this);

html,
body,
{
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
#map1Canvas {
  width: 400px;
  height: 400px;
}
#map2Canvas {
  width: 400px;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map1Canvas"></div>
<hr/>
<div id="map2Canvas"></div>
<script>
  $(function() {
    var map1 = new My.Map('#map1Canvas', {
      zoom: 10,
      center: {
        lat: 45,
        lng: -72
      }
    });
    var map2 = new My.Map('#map2Canvas', {
      zoom: 10,
      center: {
        lat: 45,
        lng: -112
      }
    });
    My.Map.renderAll();
  });
</script>