Javascript 使用USGSOverlay异步加载GoogleMap

我目前正在为我的JS文件使用Browserify。我尝试加载GoogleMap Api aSync并将USGSOverlay应用于自定义图像覆盖时出错

我跟着这个走了

对于一个简单的GoogleMaps，一切都很好，但只要我应用USGSOverlay，我就得到了多个错误，比如：uncaughtTypeError:this.draw不是一个函数WM15838:1

这一定是我调用函数的方式？代码如下：

var $ = require('jquery');

var overlay;
var map;
var USGSOverlay;

//map_area is defined inline, but for this post...
var map_area = new Array('45.684994,-73.731739','45.684616,-73.732816','45.684450,-73.732558','45.684659,-73.732002','45.684832,-73.731602');

window.launchMap = function() {
    initialize();
}

USGSOverlay.prototype.onAdd = function() {

    var div = document.createElement('div');
    div.style.borderStyle = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';

    // Create the img element and attach it to the div.
    var img = document.createElement('img');
    img.src = this.image_;
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.position = 'absolute';
    div.appendChild(img);

    this.div_ = div;

    // Add the element to the "overlayLayer" pane.
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
};

function USGSOverlay(bounds, image, map) {

    // Initialize all properties.
    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;

    // Define a property to hold the image's div. We'll
    // actually create this div upon receipt of the onAdd()
    // method so we'll leave it null for now.
    this.div_ = null;

    // Explicitly call setMap on this overlay.
    this.setMap(map);
}

USGSOverlay.prototype.draw = function() {

    // We use the south-west and north-east
    // coordinates of the overlay to peg it to the correct position and size.
    // To do this, we need to retrieve the projection from the overlay.
    var overlayProjection = this.getProjection();

    // Retrieve the south-west and north-east coordinates of this overlay
    // in LatLngs and convert them to pixel coordinates.
    // We'll use these coordinates to resize the div.
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    // Resize the image's div to fit the indicated dimensions.
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';
};

function initialize() {
    USGSOverlay.prototype = new google.maps.OverlayView();

    var mapOptions = {
        zoom: 16,
        scrollwheel: false,
        center: new google.maps.LatLng(45.684163, -73.733305),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var marker_pin = "/images/site/Pin.png";
    var swBound = new google.maps.LatLng(45.678510, -73.747798);
    var neBound = new google.maps.LatLng(45.692415, -73.718118);
    var bounds = new google.maps.LatLngBounds(swBound, neBound);

    // The photograph is courtesy of the U.S. Geological Survey.
    var srcImage = 'map.png';

    // The custom USGSOverlay object contains the USGS image,
    // the bounds of the image, and a reference to the map.
    overlay = new USGSOverlay(bounds, srcImage, map);

    infowindow = new google.maps.InfoWindow({
        content: "Chargement..."
    });


    var areaCoords = [];

    if (map_area.length > 0) {
        for    (i = 0; i < map_area.length; i++) {
            areaCoords[i] = new Array();

            for    (j = 0; j < map_area[i].length; j++) {
                coord = map_area[i][j].split(',');
                areaCoords[i][j] = new google.maps.LatLng(coord[0], coord[1]);
            }

            polygonMap = new google.maps.Polygon({
                paths: areaCoords[i],
                strokeColor: '#ff2205',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillColor: '#ff2205',
                fillOpacity: 0
            });

            polygonMap.setMap(map);
        }
        // Add a listener for the click event.
        /*google.maps.event.addListener(polygonMap, 'click', function() {
        });    */
    }

    $('.block_unit').each(function(index, element) {

        var _lat = $(this).find('.address').data('lat');
        var _lng = $(this).find('.address').data('lng');
        latLng = new google.maps.LatLng(_lat, _lng)
        $(this).next('.map_popup').find('.text').html($(this).find('.block__title').html());
        var info = $(this).next('.map_popup').html();


        //info.find('.text').html($(this).find('.block__title').html());

        var marker = new google.maps.Marker({
            map: map,
            position: latLng,
            icon: new google.maps.MarkerImage(marker_pin)
        });

        google.maps.event.addListener(marker, "click", function() {
            if (infowindow) infowindow.close();
            infowindow = new google.maps.InfoWindow({content: info});
            infowindow.open(map, marker);
        });
    });
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
      '&signed_in=true&callback=launchMap';
  document.body.appendChild(script);
}

window.onload = loadScript;

var$=require（'jquery'）；
var叠加；
var映射；
var-USGSOverlay；
//地图区域是内联定义的，但是对于这篇文章。。。
var map_area=新数组（'45.684994，-73.731739'，'45.684616，-73.732816'，'45.684450，-73.732558'，'45.684659，-73.732002'，'45.684832，-73.731602'）；
window.launchMap=函数（）{
初始化（）；
}
USGSOverlay.prototype.onAdd=函数（）{
var div=document.createElement（'div'）；
div.style.borderStyle='none'；
div.style.borderWidth='0px'；
div.style.position='绝对'；
//创建img元素并将其附加到div。
var img=document.createElement（'img'）；
img.src=this.image；
img.style.width='100%'；
img.style.height='100%'；
img.style.position='绝对'；
儿童分部（img）；
this.div=div；
//将元素添加到“覆盖层”窗格。
var panes=this.getPanes（）；
窗格。覆盖层。附属物（分区）；
};
//如果出现以下情况，将从API自动调用onRemove（）方法
//我们曾经将覆盖的map属性设置为“null”。
USGSOverlay.prototype.onRemove=函数（）{
this.div\u.parentNode.removeChild（this.div\u）；
this.div=null；
};
函数USGSOverlay（边界、图像、地图）{
//初始化所有属性。
this.bounds=bounds；
this.image=image；
this.map=map；
//定义一个属性来保存图像的div。我们将
//在收到onAdd（）时实际创建这个div
//方法，因此我们暂时将其保留为空。
this.div=null；
//在此覆盖上显式调用setMap。
这个.setMap（map）；
}
USGSOverlay.prototype.draw=函数（）{
//我们使用西南部和东北部
//将覆盖层固定到正确位置和大小的坐标。
//为此，我们需要从覆盖中检索投影。
var overlyprojection=this.getProjection（）；
//检索此覆盖的西南和东北坐标
//并将其转换为像素坐标。
//我们将使用这些坐标来调整div的大小。
var sw=overlyprojection.fromLatLngToDivPixel（this.bounds_u2;.getSouthWest（））；
var ne=overlyprojection.fromLatLngToDivPixel（this.bounds_u2;.getNorthEast（））；
//调整图像的div大小以适合指定的尺寸。
var div=this.div_2;；
div.style.left=sw.x+‘px’；
div.style.top=ne.y+'px'；
div.style.width=（ne.x-sw.x）+“px”；
div.style.height=（西南y-东北y）+“px”；
};
函数初始化（）{
USGSOverlay.prototype=new google.maps.OverlayView（）；
变量映射选项={
缩放：16，
滚轮：错误，
中心：新google.maps.LatLng（45.684163，-73.733305），
mapTypeId:google.maps.mapTypeId.SATELLITE
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var marker_pin=“/images/site/pin.png”；
var swBound=new google.maps.LatLng（45.678510，-73.747798）；
var neBound=new google.maps.LatLng（45.692415，-73.718118）；
var bounds=new google.maps.LatLngBounds（swBound，neBound）；
//这张照片是由美国地质调查局提供的。
var srcImage='map.png'；
//自定义USGSOverlay对象包含USGS图像，
//图像的边界和对贴图的引用。
覆盖=新的USGSOverlay（边界、srcImage、地图）；
infowindow=新建google.maps.infowindow({
内容：“收费……”
});
var areaCoords=[]；
如果（映射面积长度>0）{
对于（i=0；i

USGSOverlay依赖于Google Maps Javascript API v3。只有在加载代码之后才能定义它。在你的内部定义它