如何在點擊提交按鈕時清除Google地圖現有多邊形

我想清除谷歌地圖上的現有多邊形，然後在點擊提交按鈕時在Google地圖上自動生成新多邊形。我的html代碼如下所示。如何在點擊提交按鈕時清除Google地圖現有多邊形

<html> 
<head> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.9& 
            libraries=drawing"></script> 
<script type="text/javascript" src="draw_on_map.js"></script> 
</head> 
<body> 
    <div id="map-canvas" class="gmap-con"></div> 
    <input type="text" id="search_polygon" name="search_polygon" value=""> 
    <input type="submit" name="search_polygon" value="search_polygon" 
    onclick="getPolygon();"> 
    <script type="text/javascript"> 
      google.maps.event.addDomListener(window, 'load', draw_map_initialize); 
    </script> 
</body> 
</html>

我的JavaScript文件看起來像這樣

function draw_map_initialize() { 
    var mapHeight = '400px'; 
    // Set default height to Maps Containers 
    $('#map-canvas').css('height', mapHeight); 

    // Initialize map with markers(47.53187912201915, 7.705222390807307) 
    mymap = new GMaps({ 
     div: '#map-canvas', 
     lat: 47.53187912201915, 
     lng: 7.705222390807307, 
     zoom: 20, 
     zoomControl: true, 
     mapTypeId: 'satellite' 

    }); 
    map = mymap 
    drawingManager = new google.maps.drawing.DrawingManager({ 
      drawingControlOptions: { 

      position: google.maps.ControlPosition.TOP_LEFT, 
      drawingModes: [ 
       google.maps.drawing.OverlayType.MARKER, 
       google.maps.drawing.OverlayType.POLYGON 
      ] 
     }, 
     //drawingMode: google.maps.drawing.OverlayType.POLYGON, 
     markerOptions: { 
      draggable: true     
     }, 

     polylineOptions: { 
      editable: true 
     }, 
     map: map 
    }); 
    } 


    function getPolygons(){ 
    var polygon_name = document.getElementById("search_polygon").value; 
    $.ajax({ 
     url: url_prefix + "getPolygons", 
     data: ({ 
      'polygon_name': polygon_name, 
      'as_json': 1 
     }), 
     async: false, 
     dataType: "json", 
     success: function(data) { 
      polygon_points = JSON.stringify(data); 
      if (polygon_points.length === 2){ 
      alert('Sorry,No Area Stored with name '+polygon_name)     
      } 
      else{ 
      var result = {}; 
      var count = 1; 
      var path = []; 
      for (var key in data) { 
       obj = { 
        'name': key, 
        'coords': data[key] 
       }; 
       result['area' + count++] = obj; 
      } 
     var polygon_coordinates = JSON.parse(polygon_points.replace(/u/g"").replace(/'/g, 
           '"').replace(/\(/g, "[").replace(/\)/g, "]")); 
      var polygon_start_latlng; 
      for (var poly in polygon_coordinates) { 
       for (var i = 0; i < polygon_coordinates[poly].length; i++) { 
        polygon_start_latlng = polygon_coordinates[poly][0] 
       } 
      } 
      polygon_start_lat = polygon_start_latlng[0] 
      polygon_start_lng = polygon_start_latlng[1] 

      if (map === undefined) { 
       draw_map_initialize(); 
      } 
      map = sac_handler_map; 
      map.setCenter(area_start_lat, area_start_lng); 
      map.setZoom(30); 
      var my_area; 
      for (key in result) { 

       my_area = map.drawPolygon({ 
        paths: result[key].coords, 
        title: result[key].name, 
        draggable: true, 
        editable: true, 
        strokeColor: 'black', 
        strokeOpacity: 0.8, 
        strokeWeight: 2, 
        fillColor: '#FF0000', 
        fillOpacity: 0.35 
      }); 

      } 

      } 

     }, 
     error: function(data, status, e) { 
      alert(e); 
     } 
    }); 
    }

我做的是，在文本框中輸入用戶類型多邊形名頂級搜索並顯示谷歌地圖。我可以搜索多邊形並在地圖上顯示它。現在我想知道當用戶輸入並搜索新的多邊形時，如何清除谷歌地圖上以前搜索和顯示的多邊形。我試過使用my_area.setMap（null），但它沒有按預期工作。任何幫助將不勝感激。提前感謝。

來源

2014-10-29 stackOver Flow

你指定地圖API 3.9版本，這已經退役一段時間。目前的穩定版本是v3.17，這是你實際得到的。你可以指定v = 3來始終獲得當前版本。請參閱https://developers.google.com/maps/documentation/javascript/basics#Versioning – duncan 2014-10-29 09:38:24

將my_area聲明爲全局變量，即在javascript文件的開頭處添加以下聲明。

var my_area;

另外你在哪裏寫下面的方法？

my_area.setMap(null)

讓我知道，如果它

來源

2014-10-29 08:09:20 Joyson

@@ joyson：將var my_area設置爲全局變量。謝謝 – 2014-10-29 08:31:13

不客氣。很高興能夠提供幫助。 – Joyson 2014-10-29 08:59:04

如何在點擊提交按鈕時清除Google地圖現有多邊形

回答

相關問題