繪製形狀映射

我寫了這個代碼：繪製形狀映射

<html> 
<head> 

<style type="text/css"> 
    #map, html, body 
    { 
     padding: 0; 
     margin: 0; 
     height: 100%; 
    } 
</style> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=drawing,geometry"></script> 

<script> 
var coordinates = []; 
var all_shapes = []; 

var selectedShape; 
</script> 

<script> 
draw_shape() 
{ 
    all_shapes[0]; 
} 
</script> 

<script> 
function clearSelection() 
{ 
    if(selectedShape) 
    { 
     selectedShape.setEditable(false); 
     selectedShape = null; 
    } 
} 

function setSelection(shape) 
{ 
    clearSelection(); 
    selectedShape = shape; 
    shape.setEditable(true); 
} 

function deleteSelectedShape() 
{ 
    if (selectedShape) 
    { 
     selectedShape.setMap(null); 
    } 
} 
</script> 

<script> 
function save_coordinates_to_array(newShapeArg) 
{ 
    if(newShapeArg.type == google.maps.drawing.OverlayType.POLYGON) 
    { 
     var polygonBounds = newShapeArg.getPath(); 

     for(var i = 0 ; i < polygonBounds.length ; i++) 
     { 
      coordinates.push(polygonBounds.getAt(i).lat(), polygonBounds.getAt(i).lng()); 
     } 
    } 
    else 
    { 
     //alert("Not polygon");///////////// 
    } 
} 
</script> 

<script> 
function initialize() 
{ 
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 12, center: new google.maps.LatLng(32.344, 51.048)}); 

    var drawingManager = new google.maps.drawing.DrawingManager(); 
    drawingManager.setMap(map); 

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { 
     var newShape = e.overlay; 
     newShape.type = e.type; 

     all_shapes.push(newShape); 

     setSelection(newShape); 

     save_coordinates_to_array(newShape); 

     google.maps.event.addListener(newShape, 'click', function() {setSelection(newShape)}); 
     }); 

    google.maps.event.addListener(map, 'click', function(e) {clearSelection();}); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
<table border="1"> 
    <tr> 
    <td>Name</td> 
    <td><input name="name" id="name" type="text"></td> 
    </tr> 
    <tr> 
    <td>Color</td> 
    <td> 
     <table border="1" width="100%"> 
     <tr> 
      <td bgcolor="#FF0000">&nbsp;</td> 
      <td bgcolor="#00FF00">&nbsp;</td> 
      <td bgcolor="#0000FF">&nbsp;</td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="2"><input name="save" type="button" value="Save" onClick="draw_shape()"></td> 
    </tr> 
    <tr> 
    <td colspan="2"><input name="delete" type="button" value="Delete" onClick="deleteSelectedShape()"></td> 
    </tr> 
</table> 

<div id="map"></div> 
</body> 

</html>

它使用谷歌地圖圖書館繪製形狀。這是保存所有新圖形的陣列varall_shapes = [];已創建。這是有從數組繪製形狀的功能：

<script> 
draw_shape() 
{ 
    all_shapes[0]; 
} 
</script>

我有一個問題。我如何從這個數組中再次繪製形狀。

來源

2013-10-26 Sponge Bob

當然我是首發。 –

我更新了draw_shape方法。如果你點擊保存按鈕，地圖上的所有對象都將被移除，2秒後它們將從數組中恢復。

function draw_shape() 
    { 
     for(var i=0;i<all_shapes.length;i++) all_shapes[i].setMap(null); 

     setTimeout(function(){ 
     for(var i=0;i<all_shapes.length;i++) all_shapes[i].setMap(map); 
     }, 2000); 
    }

這是demo。

來源

2013-10-26 11:04:22

謝謝托爾。這是答案，但還有一個問題。我將保存數據庫中的所有形狀，這就是我使用此方法的原因。所以我認爲你的方法只是隱藏形狀，並不讓我們保存數據庫中的形狀。你認爲如何保存數據庫中的形狀？ –

繪製形狀映射

回答

相關問題