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

Answer 2

您可以在代码中使用版本A及更高版本，您可以在main.js文件中附加initMap回调。这样你就必须使用ajax调用来应用你的回调函数。

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

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

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

文档和示例：https://developers.google.com/maps/documentation/javascript/examples/map-simple

Answer 3

在单独的 my_lib.js 文件（）中，该文件应在'... maps.googleapis.com / .. etc 的标记内的em>'字符串：

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

，并且在javascript标签部分的html中，例如：

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

您可以使用任何其他Map API类

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

选项A

选项B

选项C

3 个答案: