扩展Google Maps API v3类的最佳方式

Question

可以扩展Google Maps API v3中的许多类,特别是google.maps.MVCObject和google.maps.OverlayView.

在一些示例中,它们将在回调函数中扩展一个类initMap.我的应用程序比这些示例更强大,并且不希望在回调函数中定义一堆类.

(A)的解决方案是否在我自己的脚本之前包含Google Maps API而不包含回调函数？或者(B)我只是在回调函数中定义所有内容吗？或(C)其他一些方法.

选项A.

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script src="./assets/js/main.js" type="module"></script>

选项B.

<script src="./assets/js/main.js" type="module"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>

哪里initMap是main.js和看起来是这样的:

function initMap() {

  class Alpha extends google.maps.MVCObject {}
  class Bravo extends google.maps.MVCObject {}
  class Charlie extends google.maps.MVCObject {}
  // More classes.
  class Zulu extends google.maps.MVCObject {}

  // Rest of code.

}

选项C.

其他一些方法.

Answer 1

文档描述了以下方式来扩展顶级映射类：

MVCObject 构造函数保证是一个空函数，因此您可以通过简单地编写 MySubclass.prototype = new google.maps.MVCObject(); 来继承 MVCObject。

和

通过设置叠加层的原型来继承此类：MyOverlay.prototype = new google.maps.OverlayView();。OverlayView 构造函数保证是一个空函数。

因此（一种可能的）选项C是单独定义类，然后仅在 initMap 内配置继承：

function initMap() {

  Alpha.prototype = new google.maps.MVCObject();
  Bravo.prototype = new google.maps.MVCObject();
  ...
}

或者，更好的是，为了将所有内容放在一起，您可以在库文件中包含一些引导函数，因此在中initMap您只需执行以下操作：

// in my_library.js:
// For now we don't mention that our class extends MVCObject
function Alpha() {
    console.log('Constructed Alpha');
    this.my_method = function() {
       // the `parent_method` can be defined in the
       // prototype we assign later
       this.parent_method();
    }
}

function Bravo() {
    console.log('Constructed Alpha');
}    

// The function to dynamically subclass our classes.
function init() {
   Alpha.prototype = new google.maps.MVCObject();
   Bravo.prototype = new google.maps.MVCObject();
}

// The callback for google maps script.
function initMap() {
    // invoke the `init` from my_library.
    my_library.init();;
}

上面使用实例方法（我们Alpha在构造函数内部定义方法），或者我们可以定义不带方法的构造函数，立即创建实例并在其上定义方法：

function Alpha() {
    console.log('Constructed Alpha');
}

var alpha = new Alpha();
alpha.my_method = function() {
   this.parent_method();
}

// The function to dynamically subclass our classes.
function init() {
   alpha.prototype = new google.maps.MVCObject();
}

要创建更多Alpha实例，我们可以克隆现有alpha对象。

另一种选择是使用原型定义自己的对象，然后使用Alpha.prototype.prototype = MVCObject构造：

function Alpha() {
    console.log('Constructed Alpha');
}

Alpha.prototype.my_method = function() {
   this.parent_method();
}

// The function to dynamically subclass our classes.
function init() {
   // We can not overwrite Alpha.prototype as we will loose
   // the methods we defined, so we assign the prototype of
   // the prototype
   Alpha.prototype.prototype = new google.maps.MVCObject();
}