google.maps.OverlayView() is not function

hjn090301

我想引入谷歌离线地图。但报错google.maps.OverlayView() is not function
我首先通过webstorm写了一个页面引入谷歌离线地图，可以正常使用。
然后，按同样的语句写到wex5的项目中就报错。自己在项目中的在线地图是可以使用的。
引入离线地图我是这样写的
require("./mapfiles/mapapi");
Model.prototype.ggmap=function(){
      var mapOption={//地图参数                center:new google.maps.LatLng(40.750, -74.18),
                zoom:13,
                mapTypeControl:false,
                zoomControl:false,
                streetViewControl:false,
                mapTypeId:'floorPic',
                mapTypeControlOptions:{
                        mapTypeIds:['floorPic',google.maps.MapTypeId.ROADMAP],
                        style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
                }
         };
         var map=new google.maps.Map(document.getElementById("ggmap"),mapOption);//创建地图
         map.mapTypes.set('floorPic',new CoordMapType(new google.maps.Size(20,20)));//设置地图类型为自定义地图类型

         //自定义图片叠加层
         var swBound = new google.maps.LatLng(40.716216, -74.213393);
         var neBound = new google.maps.LatLng(40.765641, -74.128235);
         var imageBounds = new google.maps.LatLngBounds(swBound, neBound);
         var imageSrc="图片路径";
         var floorpicOverlay=new DebugOverlay(imageBounds,map,imageSrc);
         //以动画方式添加标记
         var latlon=new google.maps.LatLng(40.716216, -74.213393);
         var image="图片路径";
         var alarmMarker=new google.maps.Marker({
                            position:latlon,
                            animation: google.maps.Animation.BOUNCE,
                            map:map,
                            icon:image
                        }
         );
}
//自定义叠加层的构造函数
DebugOverlay.prototype = new google.maps.OverlayView();
        function DebugOverlay(bounds,map,image){
            this.bounds_=bounds;
            this.image_=image;
            this.map_=map;
            this.div_=null;
            this.setMap(map);
        };
        DebugOverlay.prototype.onAdd=function(){
            var div=document.createElement('div');
            div.style.borderStyle="none";
            div.style.borderWidth="0";
            div.style.position = 'absolute';
            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;
            var panes=this.getPanes();
            panes.overlayLayer.appendChild(div);
        };
        DebugOverlay.prototype.draw = function() {
            var overlayProjection = this.getProjection();
            var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
            var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
            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';
        };
        DebugOverlay.prototype.updateBounds = function(bounds){
            this.bounds_ = bounds;
            this.draw();
        };
        DebugOverlay.prototype.onRemove = function() {
            this.div_.parentNode.removeChild(this.div_);
            this.div_ = null;
        };//自定义基本地图类型
        function CoordMapType(tileSize) {
            this.tileSize = tileSize;
    }
    CoordMapType.prototype.maxZoom = 19;
    CoordMapType.prototype.name = 'FloorPic';
    CoordMapType.prototype.alt = 'Tile Coordinate Map Type';
    CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
            var div = ownerDocument.createElement('div');
            //div.innerHTML = coord;
            div.style.width = this.tileSize.width + 'px';
            div.style.height = this.tileSize.height + 'px';
            //div.style.fontSize = '10';
            //div.style.borderStyle = 'solid';
            //div.style.borderWidth = '1px';
            //div.style.borderColor = '#AAAAAA';
            //div.style.backgroundColor = '#FFF';
            return div;
    };
基本上是这样，但是报google.maps.OverlayView() is not function，这是为什么，是js引用有错吗，还是语句位置放的不对。

liangyongfei

估计是初始化环境还没有准备好！.OverlayView() 方法不存在呢还！

建议参考：http://docs.wex5.com/wex5-ui-question-list-2104/

当环境初始化完毕后！再调用它的方法

hjn090301

liangyongfei 发表于 2017-4-24 10:32
估计是初始化环境还没有准备好！.OverlayView() 方法不存在呢还！

建议参考：http://docs.wex5.com/wex5-u ...

按照给的参考做了。不行，还是报not function。

liangyongfei

hjn090301 发表于 2017-4-24 14:55
按照给的参考做了。不行，还是报not function。

你应该先判断 google.maps 是否存在？？如果已经初始化存在了，再调用 OverlayView方法！
如果 google.maps 不存在！那么当然也没必要调用OverlayView

另外关于js的引用，参考下
http://doc.wex5.com/js-module-01/

hjn090301

hjn090301 发表于 2017-4-24 14:55
按照给的参考做了。不行，还是报not function。

好了，可以正常使用了。
因为他是通过mapapi.js再调用其他js的，所以通过require("mapapi")只是调到mapapi.js，而调不到其他的js。
我直接通过require();把其他的18个js也调用过来，就可以正常使用了。
除了这种方法，还有没有其他的方法啊？因为正常通过mapapi.js是可以调用其他js的。咱平台是不是不可以通过js调用其他js？

liangyongfei

hjn090301 发表于 2017-4-24 16:58
好了，可以正常使用了。
因为他是通过mapapi.js再调用其他js的，所以通过require("mapapi")只是调到mapap ...

mapapi.js 里面如果也是 amd 格式并且它 里面require 了其他 js
就可以做到相互依赖加载的！

但是如果格式不是amd 的！就没法了！只能自己同时引入了！

hjn090301

liangyongfei 发表于 2017-4-24 18:04
mapapi.js 里面如果也是 amd 格式并且它 里面require 了其他 js
就可以做到相互依赖加载的！

不是amd格式的，自己修改也没成功。只能同时引入了。
谢谢了，结贴吧。