个人中心
gpt4 book ai didi

javascript - 绘制后单击按钮删除多边形

转载 作者：行者123 更新时间：2023-12-03 00:17:35 24 4
gpt4 key购买 nike

我尝试开发一个应用程序，用户可以在谷歌地图中绘制多边形，并在弹出的信息窗口中添加有关它的附加信息。信息输入完成后，用户应单击“保存”以保存信息，如果要删除多边形，则应单击“删除”。删除是指在 map 上不再可见。

我尝试了以下代码，但没有成功。问题似乎是底部“deletePolygon”函数的范围。如果我在 google.maps.event.addListener 函数中输入 polygon.setMap(null); ，它会从 map 中删除多边形，但我不知道如何单击按钮即可触发它。

P.S:我将整个脚本粘贴到 JSFiddle 的“html”部分，这可能是错误的。抱歉!

<!DOCTYPE html>
<html>

<head>
  <title>Drawing Tools</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    
    #map {
      width: 1200px;
      height: 800px;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap" async defer></script>
  <script>
    // hier die Einstellungen für den Schutz vor CSRF
    var map;
    var infoWindow;

    //Einstellungen der Grundkarte
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: 49.819227,
          lng: 19.230721
        },
        zoom: 13
      });
      //Einstellungen des Drawing Managers
      var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.null, //Zeichnen Standardmäßig nicht ausgewählt wenn die Karte geladen wird (alternativ: polygon, marker etc)
        drawingControl: true, //drawing manger wird angezeigt
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER, //position des drawing managers
          drawingModes: ['polygon'] // Auswahlmöglichkeiten der Werkzeuge :'marker', 'circle', 'polygon', 'polyline', 'rectangle'
        },
        //Optionen zur Darstellung Polygon
        polygonOptions: {
          fillColor: '#ffff00', //Farbwahl
          fillOpacity: 0.5,
          strokeWeight: 3,
          clickable: false, //erweiterte Funktion
          editable: false,
          zIndex: 1
        }
      });
      drawingManager.setMap(map);

      //Erstellung einer Infobox zur Bennenung der Probe
      function polygonCenter(poly) {
        var lowx,
          highx,
          lowy,
          highy,
          lats = [],
          lngs = [],
          vertices = poly.getPath();

        for (var i = 0; i < vertices.length; i++) {
          lngs.push(vertices.getAt(i).lng());
          lats.push(vertices.getAt(i).lat());
        }

        lats.sort();
        lngs.sort();
        lowx = lats[0];
        highx = lats[vertices.length - 1];
        lowy = lngs[0];
        highy = lngs[vertices.length - 1];
        center_x = lowx + ((highx - lowx) / 2);
        center_y = lowy + ((highy - lowy) / 2);
        return (new google.maps.LatLng(center_x, center_y));
      }
      //InfoBox Text
      html = "<table>" +
        "<tr>" +
        "<td>Bezeichnung:</td>" +
        "<td><input type='text' id='feldbezeichnung'/> </td>" +
        "</tr>" +
        "<tr>" +
        "<td><input type='button' value='save' onclick='saveData()'/></td>" +
        "<td><input type='button' value='delete' onclick='deletePolygon()'/></td>" +
        "</tr>";

      //Erstellung einer Infobox wenn ein Feld eingezeichnet wurde
      google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
        drawingManager.setDrawingMode(null);
        //Öffnen der Infobox
        var InfoBoxLoc = polygonCenter(polygon); //Koordinaten der Infobox zur Beschriftung

        infowindow = new google.maps.InfoWindow({
          content: html,
          position: InfoBoxLoc,
        });
        infowindow.open(map);

        //it works here but how to trigger it on button press from the infowindow?
        //##################polygon.setMap(null);

      });
      //Ende Drawing manager
    } //Ende Init Map

    //funktion zum speichern der Daten
    function saveData() {
      var FieldName = escape(document.getElementById("feldbezeichnung").value);
      console.log(FieldName)
      //schließt das InfoWindo nach erfolgreicher Eingabe
      infowindow.close();
    }

    //funktion zum löschen des Polygon bei falscher Eingabe
    function deletePolygon() {
      infowindow.close();
      console.log(polygon)
      polygon.setMap(null);
    }
  </script>
</head>

<body>
  <!--Einbinden von Google Maps -->
  <div id="map"></div>
</body>

</html>

最佳答案

下面的代码在进行更改的地方进行了注释，但本质上，如果您监听 infoWindow 事件并在其中分配监听器，则相当容易。希望以下内容将演示如何做到这一点

<!DOCTYPE html>
<html>
    <head>
        <title>Drawing Tools</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
        /* Always set the map height explicitly to define the size of the div
           * element that contains the map. */

        #map {
          width: 1200px;
          height: 800px;
        }
        /* Optional: Makes the sample page fill the window. */

        html,
        body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        </style>

        <script>
            var map;
            var infoWindow;

            function initMap() {
              var map = new google.maps.Map(document.getElementById('map'), {
                center: {
                  lat: 49.819227,
                  lng: 19.230721
                },
                zoom: 13
              });


              var drawingManager = new google.maps.drawing.DrawingManager({
                drawingMode: google.maps.drawing.OverlayType.null,
                drawingControl: true,
                drawingControlOptions: {
                  position: google.maps.ControlPosition.TOP_CENTER,
                  drawingModes: ['polygon']
                },
                polygonOptions: {
                  fillColor: '#ffff00',
                  fillOpacity: 0.5,
                  strokeWeight: 3,
                  clickable: false,
                  editable: false,
                  zIndex: 1
                }
              });
              drawingManager.setMap(map);


              function polygonCenter(poly) {
                var lowx,
                  highx,
                  lowy,
                  highy,
                  lats = [],
                  lngs = [],
                  vertices = poly.getPath();

                for (var i = 0; i < vertices.length; i++) {
                  lngs.push(vertices.getAt(i).lng());
                  lats.push(vertices.getAt(i).lat());
                }

                lats.sort();
                lngs.sort();
                lowx = lats[0];
                highx = lats[vertices.length - 1];
                lowy = lngs[0];
                highy = lngs[vertices.length - 1];

                center_x = lowx + ((highx - lowx) / 2);
                center_y = lowy + ((highy - lowy) / 2);
                return (new google.maps.LatLng(center_x, center_y));
              }

              /*
                remove inline event handlers from HTML
                and assign dynamically when the content
                is actually loaded into the DOM
              */
              html = "<table>" +
                "<tr>" +
                "<td>Bezeichnung:</td>" +
                "<td><input type='text' id='feldbezeichnung'/> </td>" +
                "</tr>" +
                "<tr>" +
                "<td><input type='button' value='save' data-action='save' /></td>" +
                "<td><input type='button' value='delete' data-action='delete' /></td>" +
                "</tr>";


              google.maps.event.addListener(drawingManager, 'polygoncomplete', function( polygon ) {
                drawingManager.setDrawingMode(null);

                var InfoBoxLoc = polygonCenter(polygon);

                infowindow = new google.maps.InfoWindow({
                  content: html,
                  position: InfoBoxLoc,
                });

                infowindow.open(map);


                /*
                    The `infoWindow` will fire a `ready` event when it is loaded and, as you are loading HTML data into
                    an infoWindow, it makes sense to watch for that event and assign event listeners accrdingly to any
                    child elements
                */
                google.maps.event.addListener( infowindow, 'domready', event => {
                    /*
                        Obtain a reference to the buttons `save` and `delete` 
                        and assign event listeners
                    */
                    document.querySelector('td > input[type="button"][data-action="save"]').addEventListener('click', e=>{
                        let fieldname = escape( document.getElementById("feldbezeichnung").value )
                        console.log( fieldname )
                        infowindow.close();
                    });     

                    document.querySelector( 'td > input[type="button"][data-action="delete"]' ).addEventListener('click', e=>{
                        infowindow.close();
                        console.log(polygon)
                        polygon.setMap(null);
                    }); 
                });
              });
            }
        </script>
        <script src="//maps.googleapis.com/maps/api/js?key=APIKEY&libraries=drawing&callback=initMap" async defer></script>
    </head>
    <body>
      <div id="map"></div>
    </body>
</html>

关于javascript - 绘制后单击按钮删除多边形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54474140/

24 4 0
文章推荐： javascript - 即使在获取数据后，React 组件的 render 方法也会调用两次
文章推荐： javascript - 为什么按钮中的 event.target 返回空值？
文章推荐： javascript - 使用参数链接到路线的正确方法是什么？
文章推荐： javascript - 如何为某些元素启用上下文菜单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com