关于javascript：扩展Google Maps API v3类的最佳方式

Best way to extend Google Maps API v3 Classes

可以扩展google maps api v3中的一些类，特别是google.maps.mvcobject和google.maps.overlayview。

在一些示例中，它们将在回调函数initMap中扩展类。我的应用程序比那些例子更健壮，不希望在回调函数中定义一系列类。

(a)的解决方案是在我自己的脚本之前包含google maps api，而不包含回调函数吗？或者(b)我只是定义回调函数中的所有内容吗？或(c)其他方法。

选项A

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

选项B

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

其中initMap在main.js中，看起来是这样的：

1
2
3
4
5
6
7
8
9
10
11

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

其他方法。

相关讨论

《文献describes下面的方式：他们在地图上

The MVCObject constructor is guaranteed to be an empty function, and so you may inherit from MVCObject by simply writing MySubclass.prototype = new google.maps.MVCObject();

鸭

Inherit from this class by setting your overlay's prototype: MyOverlay.prototype = new google.maps.OverlayView();. The OverlayView constructor is guaranteed to be an empty function.

所以这一可能的选项C)将是你的类的定义，然后分别在"只读configure传承的initmap：

1
2
3
4
5
6

function initMap() {

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

或者，更好的保持平衡，一切都在一起，你可以拥有一些自助图书馆的功能在你的文件，所以你会在initMap正是这样做的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 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方法在《constructor alternatively)，我们可以定义的方法constructor没有立即报审，创建和定义在它的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13

创造更多的Alphainstances clone，我们可以在现有Alpha对象。

一个替代的冰的两个定义自己的对象使用的原型，然后使用Alpha.prototype.prototype = MVCObject构造：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

相关讨论

谢谢你的回复。我的主要问题不是用类定义来膨胀initMap定义，同时确保可以扩展GoogleMapsAPI。如果我在异步中使用API，则需要在加载API之前定义initMap。您的两个建议都显示在上面的选项B中。
@Hungerstar类定义必须放在某个地方，无论放在哪里，它们都是相同数量的代码。通过将它们全部放入一个类似于Boris的my_library.init()的函数中，您可以从initMap()对该函数进行一次调用(如果您是异步加载API)，或者在其他地方(如果您是同步加载API)。我不知道如何将一行代码添加到initMap()的"bloats"函数中。
@Michaelgeary您是正确的，事实上，将类定义放在init函数中不会膨胀initMap回调。我在为谷歌地图API应用程序寻找一种"首选"或"典型"的方法。在initMap函数中有一堆类定义似乎有点"代码味道"。也许不是，我需要克服这个问题，：p。答案似乎是指向我想要如何组织代码，以及如何加载脚本，而不是"Google Maps 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将是undefined。基本上是同步方法。如果我使用async或者在API之前加载我的代码，我的类定义需要在一个函数中才能避免MVCObject没有被定义，对吗？我从你的回答中得出的结论是，不要在initMap中定义我的子类，而是在另一个函数中进行，并从initMap中调用另一个函数。
不，您从任何函数中定义类，它们将与您拥有的类完全相同，唯一的区别是它们还没有"子类化"。加载完所有内容后，通过分配原型动态地执行"子类化"(只有Class.prototype = new google.maps.Base调用进入init函数)。
我更新了代码示例，也许它不够清楚。
你更新的代码是我最初从你的答案中理解的。也许我遗漏了一些明显的东西，但是我将在我的子类上使用方法。使用new在init中分配原型不允许我提前定义方法。然后我需要以某种方式合并这两个类吗？谢谢你的所有意见。
"使用new在init中分配原型不允许我提前定义方法"-为什么不呢？不管子类化的方式如何，类中的所有代码都将保持不变。重要的是，当您的类实际使用时，它们已经在init中进行了配置(这是正常的，因为在加载Google库之前，您的代码无论如何都无法工作)。如果您提供一些类的最小工作示例，可能会更清楚一些，因此我们可以修改它以使用动态原型，并看到它仍然有效。
我将把我的方法分配给原型，即Alpha.prototype.hello = function () {};。重新定义原型将删除这些方法。你在说实例方法吗？即function Alpha() { this.hello = function () {}; }。这个JSfiddle演示了我的期望和正在做的事情。var b不再有原来在Alpha上的hello方法。
我的Alpha的构造函数会是这样的吗？
您可以a)使用Alpha.prototype.prototype = new MVCObject(jsfiddle.net/l28bkbo8)或b)使用实例方法(jsfiddle.net/gdgh6w6x/1)
@鲍里塞雷布罗夫感谢所有伟大的反馈和耐心！我想我将依靠实例方法解决方案，因为我将创建少于100个实例。Prototype.Prototype方法有任何缺点，如何使用ES6类实现实例化方法(我的尝试)？
class语法只是一种语法上的制糖，原型仍然在工作(这就是为什么我更喜欢旧的语法)。在ES6中，prototype的用法似乎有点不同，您的示例适用于Alpha.prototype.__proto__ = Beta.prototype。还可以查看文档类，还可以查看object.setprototypeof和object.create的文档和示例，也许您会找到更好的动态构建对象的方法。
我试过Object.create，但似乎没用。我想我只需要使用ES5语法。再次感谢。

你可以使用A和以后的版本，你可以在你的代码append《initmap main.js回调你的文件。在这种方式我可以使用Ajax要求申请yout回调功能。

否则你会有两个选项B"的使用和定义开始，《initmap main.js功能在你的文件。

你应该也负载的Google Maps API在异步模式：

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

文献和实例：http：/ / / / developers.google.com地图JavaScript文件/ / /图的简单例子