阿里云地图添加点线面

1、参考实例网址:http://ditu.aliyun.com/jsdoc/map/examples.html

2、实例代码:

/**
 * --------add marker---------------------
 */
var amarker,addMarkerListener;

function  activateAddMarker(){
      addMarkerListener=AliEvent.addListener(map,"click",function(point){
        var latlng=map.fromContainerPixelToLatLng(point);
        var lonlat=point.x+","+point.y;
        if(amarker!=null) map.clearOverlays();
        amarker=new AliMarker(latlng,{draggable:true});
        var lsResultDiv=$('#result').html(lonlat);
        map.addOverlay(amarker);
     });
}

/**
 * ---------remove addmarker listener------------------
 */

function  deactivateAddMarker(){
    AliEvent.removeListener(addMarkerListener);
}
/**
 * ---------add polyline------------------
 */
var polyline;
function activeAddPolyline(){
     //先初始化一个空的折线
    polyline=new AliPolyline([]);
    //必须先添加到地图才能允许用户绘制
    map.addOverlay(polyline);
    AliEvent.addListener(polyline,"drawstart",onDrawStart);
    AliEvent.addListener(polyline,"drawend",onDrawEnd);
    //开始让用户在地图上绘制折线
    polyline.startDrawing();
    //可编辑
    polyline.startEditting();
}

/**
 * ---------add polyline functions------------------
 */
function startDraw(){
       polyline.setPoints([]);
       polyline.startDrawing();
}
function endDraw(){
       polyline.endDrawing();
}
function onDrawStart(){
     document.getElementById("drawStatus").innerHTML="draw start";
}
function onDrawEnd(){
     document.getElementById("drawStatus").innerHTML="draw  end ";
}
//edit polyline---
function startLineEdit(){
      polyline.startEditting();
}
function endLineEdit(){
     polyline.endEditting();
}

function deactiveAddPolyline(){
     polyline=null;
}
/**
 * -----add polygon-------------------
 */
var polygon;
function activateAddPolygon(){
     //先建立一个空的多边形
     polygon=new AliPolygon([]);
     //必须先添加到地图才能允许用户绘制
     map.addOverlay(polygon);
     AliEvent.addListener(polygon,"drawstart",onDrawPolygonStart);
     AliEvent.addListener(polygon,"drawend",onDrawPolygonEnd);
     //开始多边形的绘制
     polygon.startDrawing();
     //可编辑
     polygon.startEditting({disableIntersection:true});
}

/**
 * ---------add polygon functions------------------
 */
function startDraw(){
     polygon.setPoints([]);
     polygon.startDrawing();
}
function endDraw() {
     polygon.endDrawing();
}
function onDrawPolygonStart(){
   document.getElementById("drawStatus").innerHTML="Polygon start";
}
function onDrawPolygonEnd(){
   document.getElementById("drawStatus").innerHTML="Polygon end  ";
}
function startPolygonEdit(){
        polygon.startEditting();
}
function endPolygonEdit(){
       polygon.endEditting();
}
function deactivateAddPolygon(){
        polygon=null;
}

/**
 * ---------绘制矩形------------------
 */
var rect;
function activatePolygonFoure(){
     rect=new AliRectOverlay();
     map.addOverlay(rect);
     AliEvent.addListener(rect,"drawstart",onSideDrawStart);
     AliEvent.addListener(rect,"drawend",onSideDrawEnd);
     //开始绘制矩形
     rect.startDrawing();
    rect.startEditting();
}
/**
 * --------add circle---------------------
 */
var oval;
function addCircle(){
 //绘制以center为中心,3000米为直径的正圆
 oval=new AliOvalOverlay(map.getProjection().getSquare(map.getCenter(),3000),{editSymbolCtl:128});
 map.addOverlay(oval);
 oval.startEditting({keepRatio:true});
}
原文地址:https://www.cnblogs.com/boonya/p/2433955.html