这是我用来在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...
}