阿里云地图添加点线面
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}); }
纸上得来终觉浅,绝知此事要躬行。