Question

基本上我只希望用户能够向地图添加一个矩形选择。但是现在它只是增加了你想要的数量。我尝试添加使addSelection等于noop。但那对我来说并没有。我认为这只会让函数执行一次。无论如何，我试图只允许用户向地图添加一个矩形选择。我想知道细读的最佳途径是什么。

＆＃13;

      html, body {
          height: 100%;
          margin: 0;
          padding: 0;
      }
      #map {
          height: 100%;
      }

＆＃13;

<body>
    <div id="map"></div>
    <script>
        var map;
        var rectangle;
        var infoWindow;
        var penang = {
            lat: 5.466277,
            lng: 100.289981
        };

        /**
         * The CenterControl adds a control to the map that recenters the map on Chicago.
         * This constructor takes the control DIV as an argument.
         * @constructor
         */
        function noop() {}

        function addSelection(controlDiv, map) {

            // Set CSS for the control border.

            var controlUI = document.createElement('div');
            controlUI.style.backgroundColor = '#fff';
            controlUI.style.border = '2px solid #fff';
            controlUI.style.borderRadius = '3px';
            controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
            controlUI.style.cursor = 'pointer';
            controlUI.style.marginBottom = '22px';
            controlUI.style.textAlign = 'center';
            controlUI.title = 'Click to make selection';
            controlDiv.appendChild(controlUI);

            // Set CSS for the control interior.
            var controlText = document.createElement('div');
            controlText.style.color = 'rgb(25,25,25)';
            controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
            controlText.style.fontSize = '16px';
            controlText.style.lineHeight = '38px';
            controlText.style.paddingLeft = '5px';
            controlText.style.paddingRight = '5px';
            controlText.innerHTML = 'Select Region';
            controlUI.appendChild(controlText);

            // Setup the click event listeners: simply set the map to Chicago.
            controlUI.addEventListener('click', function() {

                var centerView = map.getCenter();
                var bounds = map.getBounds();
                var hoach = bounds.getNorthEast().lat();
                var moach = bounds.getSouthWest().lat();
                var dim = (hoach - moach) / 4;
                var selectionBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(centerView.lat() - dim, centerView.lng() - dim),
                new google.maps.LatLng(centerView.lat() + dim, centerView.lng() + dim));
                // Define the rectangle and set its editable property to true

                rectangle = new google.maps.Rectangle({
                    bounds: selectionBounds,
                    editable: true,
                    draggable: true,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                });
            });
            addSelection == noop; //Why doesen't this limit it to one?
        }

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                panControl: true,
                center: penang
            });

            // Create the DIV to hold the control and call the CenterControl() constructor
            // passing in this DIV.
            var selectionControlDiv = document.createElement('div');
            var selectionControl = new addSelection(selectionControlDiv, map);
            selectionControlDiv.index = 1;
            map.controls[google.maps.ControlPosition.TOP_CENTER].push(selectionControlDiv);



        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?&callback=initMap&signed_in=true" async defer>
        
    </script>
</body>

＆＃13;

Answer 1

使addSelection等于noop是没用的，您必须删除点击监听器。

但是，当您只需要按钮时，您可以在点击后删除按钮：

controlUI.addEventListener('click', function() {

   this.parentNode.removeChild(this);

   //continue with your code......
});

Workng Google Maps API我设置了它，以便用户可以在其屏幕上添加选择矩形。我怎么只能这样做一次？

1 个答案: