Javascript 扩展GoogleMapsAPI v3类的最佳方法

GoogleMapsAPIv3中的许多类都可以扩展，特别是和

在一些示例中，它们将扩展回调函数

initMap

中的类。我的应用程序比那些示例更健壮，并且不希望在回调函数中定义一堆类

解决方案是（A）在我自己的脚本之前包含GoogleMapsAPI，而不包含回调函数吗？或者（B）我只是定义回调函数中的所有内容吗？或（C）其他方法

方案A 备选案文C

---

另一种方法。

文档介绍了扩展顶级地图类的以下方法：

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

construct:

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();
}

---

您可以使用版本A，稍后在代码中可以将initMap回调追加到main.js文件中。这样，您就必须使用ajax调用来应用您的回调函数

否则，您必须从一开始就使用选项B，并在main.js文件中定义initMap函数

您还应以异步模式加载google maps api：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>

---

文档和示例：

在单独的文件中，例如，my_lib.js文件（它应该在html页面标记中的“…maps.googleapis.com/.etc”字符串之后声明）：

class MyPolygon extends google.maps.Polygon{ 
    field1;field2; map
    constructor(latlngs,bcolor,idLcl, id_of_start,id_of_finish,map ) {
        super({
        paths: latlngs,
        strokeColor: ''+bcolor,
        strokeOpacity: 0.8,
        strokeWeight: 2,
        suppressUndo: true,
        fillColor: '',
        fillOpacity: 0.35,
        my_id: idLcl,
        my_color: ''+bcolor,
        addrs_ids: [],
        start_id: id_of_start,
        finish_id:  id_of_finish,});
      this.map=map
      this.setMap(map)

   }
    func1(aParam){
       this.field1=0 ; this.field2=null
   }
}
class SomeOtherPlaceConsumableClass(){}

在您的html withinin javascript标记部分，您有，例如：

idLcl = idPrm
polygon=new MyPolygon(latlngs,color,idLcl, id_of_start,id_of_finish,map)

---

您可以使用任何其他Map API类实现这一点

Google Maps JavaScript API是异步加载的，我认为回调方法最适合Maps JavaScript API的异步特性。我并不完全反对使用回调。我只是想避免回调中有600行类定义。谢谢你的反馈。谢谢你的回复。我的主要问题是没有用类定义来扩充

initMap

定义，同时确保可以扩展googlemapsapi。如果在异步中使用API，则需要在加载API之前定义

initMap

。您的两个建议似乎都在上面的选项B中。@hungerstar您的类定义必须放在某个地方，并且无论放在哪里，它们的代码量都是相同的。通过将它们全部放在Boris的

my_library.init（）

之类的函数中，您可以从

initMap（）

调用该函数，如果您异步加载API，或者在其他地方同步加载API。我看不出在

initMap（）

中添加一行代码如何“膨胀”函数。@MichaelGeary将类定义放在

init

函数中实际上不会膨胀

initMap

回调，这是正确的。我正在为谷歌地图API应用程序寻找一种“首选”或“典型”的方法。在

initMap

函数中有一堆类定义似乎有点“代码味道”。也许不是，我需要克服这一点：：P。答案似乎指向我想如何组织代码以及如何加载脚本，而不是“谷歌地图API方式”。我开始准备将所有类定义包装到

init

函数中。@hungerstar

Alpha.prototype=new google.maps.MVCObject（）

是一种表示“Alpha是一个MVCOjbect子类”的方式。因此，我们的想法是，在任何函数之外都有完整的类声明，然后在

mylibrary.init

函数中只有这些

X.prototype=new google.maps.BaseObject

，您可以从

initMap

调用它们。所以所有代码都不在initMap中，也不在任何函数中编写类，

init

仅在加载所有内容时将您的类绑定到google maps库中的基本对象。如果我在任何函数之外对

MVCObject

进行子类化，则我必须在API加载后执行此操作，因为

MVCObject

将是

未定义的。基本上，是一种同步方法。如果我正在使用
async
或在API之前加载代码，我的类定义确实需要在函数中才能绕过未定义的
MVCObject
，对吗？我从你的答案中得到的启示是，不要在
initMap
中定义我的子类，而是在另一个函数中定义，然后从
initMap
调用另一个函数。我忘了提到我在结束body标记之前加载所有JS，所以使用/不使用async应该不是问题。我假设ajax对选项A的建议是在异步模式下，因为在非异步模式下是不必要的。如果是这样，这将如何工作呢？即使在页脚中加载了js，也可以使用异步，因为您的页面不会等待google maps api库加载。是的，我建议您使用ajax调用，因为我也这么做，而且效果很好。d
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>

class MyPolygon extends google.maps.Polygon{ 
    field1;field2; map
    constructor(latlngs,bcolor,idLcl, id_of_start,id_of_finish,map ) {
        super({
        paths: latlngs,
        strokeColor: ''+bcolor,
        strokeOpacity: 0.8,
        strokeWeight: 2,
        suppressUndo: true,
        fillColor: '',
        fillOpacity: 0.35,
        my_id: idLcl,
        my_color: ''+bcolor,
        addrs_ids: [],
        start_id: id_of_start,
        finish_id:  id_of_finish,});
      this.map=map
      this.setMap(map)

   }
    func1(aParam){
       this.field1=0 ; this.field2=null
   }
}
class SomeOtherPlaceConsumableClass(){}

idLcl = idPrm
polygon=new MyPolygon(latlngs,color,idLcl, id_of_start,id_of_finish,map)