谷歌绘制多边形的问题

时间:2014-04-09 09:24:27

标签: javascript google-maps google-maps-api-3 requirejs

这是我用来在Javascript中绘制手绘多边形的一些代码,代码似乎没有工作,它抛出一个错误,说poly是null。

 In mouseDown Listener gmaps_controls.js:246
 Uncaught InvalidValueError: not an Array main.js:14
 (anonymous function) main.js:14
 Bl main.js:48
 Kl.(anonymous function).setPath main.js:48
 H.setValues main.js:21
 Kl main.js:48
 Ml main.js:48
 createPolyline gmaps_drawLine.js:4
 mouseDownListener

 In MouseMoveListener gmaps_controls.js:252
 Uncaught TypeError: Cannot read property 'getPath' of null gmaps_drawLine.js:22
 extendPolylineTo gmaps_drawLine.js:22
 mouseMoveListener

  In mouse up listener gmaps_controls.js:256
  Uncaught TypeError: Cannot read property 'getPath' of null gmaps_drawLine.js:48
  getPathFromPolyline gmaps_drawLine.js:48
  mouseUpListener

这是关于此的一些代码:

 var mouseDownListener=function(event){
                //if(event.button!=2)   return;
                console.log("In mouseDown Listener");
                poly=line.createPolyline(map,'#FF0000');
                line.addToPolylineAt(poly,0,event.latLng);
                line.addPolylineToMap(poly,map);
            };
            var mouseMoveListener=function(event){
                console.log("In MouseMoveListener");
                line.extendPolylineTo(poly,event.latLng);
            };
            var mouseUpListener=function(event){
                console.log("In mouse up listener");
                if(mouseMoveEvent)  e.removeListener(mouseMoveEvent);
                var paths=line.getPathFromPolyline(poly);
                params.latitude=null;
                params.longitude=null;
                params.geometry=loader.encodeShape(paths);
                console.log(params.geometry);
                $.ajax({
                    type:'POST',
                    url:'http://localhost:8180/GoogleMapsLoadingTest/AjaxCallReciever',
                    charset:'utf-8',
                    data:JSON.stringify(params),
                    success:function(msg)
                    {
                        console.log(msg);
                    },
                    error:function(xhr,status)
                    {
                        console.log(status);
                    },      
                    contentType:'application/json'
                });
                line.removePolylineFromMap(poly);
                poly=polygon.createPolygon(polygonOptions);
                polygon.setPath(poly,paths);
                polygon.addPolygonToMap(poly,map);
            };
            e.addEventToTarget(map,"mousedown",mouseDownListener);
            var mouseMoveEvent=e.addEventToTarget(map,"mousemove",mouseMoveListener);
            e.addEventToTarget(map,"mouseup",mouseUpListener);

添加事件的功能如下:

 addEventToTarget:function(onWhat,eventType,fn)
    {
        var handle= gmaps.event.addListener(onWhat,eventType,fn);
        return handle;
    },
    removeListener:function(which)
    {
        gmaps.event.removeListener(which);
    }

绘制线的功能如下:

createPolyline:function(points,colour){
            var pline=new gmaps.Polyline({
                path:points,
                strokeColor:colour,
                strokeOpacity:1.0,
                strokeWeight:2
            });
            return pline;
        },
        addPolylineToMap:function(pline,map)
        {
            pline.setMap(map);
        },
        removePolylineFromMap:function(pline)
        {
            pline.setMap(null);
        },
        extendPolylineTo:function(pline,point)
        {
            var path=pline.getPath()
            path.push(point);
        },
        addToPolylineAt:function(pline,where,what)
        {
            var path=pline.getPath();
            path.insertAt(where,what);
        },
         getPathFromPolyline:function(pline){
            return pline.getPath();
        }

这些是用于创建多边形的一些函数:

 createPolygon:function(options)
    {
        var odin=new gmaps.Polygon(options);
        console.log(odin instanceof gmaps.Polygon);
        return odin;
    },
    addPolygonToMap:function(pgon,map)
    {
        pgon.setMap(map);
    }

编辑:

我使用requirejs并按照以下方式定义poly:

 //this defines controls to be added to map      define(['./maploader','./gmaps_drawMarker','./gmaps_drawLine','./gmaps_drawPolygon','./gmaps_events'],function(loader,point,line,polygon,e){
     var params=window.sessionParameters;
     var marker=null;
     var pline=null;
     var poly=null;
     return{
           //polygon function here contains the events above...
         } 

0 个答案:

没有答案