Question

我创建了矩形。该矩形是可编辑的。因此用户可以编辑该大小，但是我的问题是我希望保持长宽比的大小以及代码库将决定最合适的大小。一切都按预期工作，但是当我更改边界时覆盖层没有更新。更改边界后，如何更新叠加层？拖动矩形时，覆盖层已更新。

演示GIF：

let map;
//Based on it create new rectangle
let last_rectangle_size;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 23.076250,
            lng: 72.594560
        },
        zoom: 17
    });

    const rectangle = new google.maps.Rectangle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 0,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        draggable: true,
        editable: true,
        map: map,
        bounds: calcBounds(new google.maps.LatLng(23.076250, 72.594560), new google.maps.Size(500 / 1.414213, 500 / 1.414213))
    });

    google.maps.event.addListener(rectangle, 'bounds_changed', function(event) {
        let boxsize;
        const center = map.getCenter();
        const rectangle_center = rectangle.getBounds().getCenter();
        const rectangle_center_lat = rectangle_center.lat();
        const rectangle_center_lng = rectangle_center.lng()
        const ne = rectangle.getBounds().getNorthEast();
        const sw = rectangle.getBounds().getSouthWest();
        const size = coortometer(ne.lat(), ne.lng(), sw.lat(), sw.lng());
        if (size > 450) {
            boxsize = 500;
        } else if (size >= 300 && size < 450) {
            boxsize = 400;
        } else if (size >= 150 && size < 300) {
            boxsize = 200;
        } else {
            boxsize = 100;
        }
        const latlong = calcBounds(new google.maps.LatLng(rectangle_center.lat(), rectangle_center.lng()), new google.maps.Size(boxsize / 1.414213, boxsize / 1.414213));
        last_rectangle_size = boxsize;
        rectangle.setMap(null);
        rectangle.bounds = latlong;
        rectangle.setMap(map);
        google.maps.event.trigger(rectangle, 'dragend')
    });

    function calcBounds(center, size) {
        const north = google.maps.geometry.spherical.computeOffset(center, size.height / 2, 0).lat();
        const south = google.maps.geometry.spherical.computeOffset(center, size.height / 2, 180).lat();
        const east = google.maps.geometry.spherical.computeOffset(center, size.width / 2, 90).lng();
        const west = google.maps.geometry.spherical.computeOffset(center, size.width / 2, 270).lng();
        return new google.maps.LatLngBounds(new google.maps.LatLng(south, west), new google.maps.LatLng(north, east))
    }

    function coortometer(lat1, lon1, lat2, lon2) {
        const R = 6378.137;
        const dLat = lat2 * Math.PI / 180 - lat1 * Math.PI / 180;
        const dLon = lon2 * Math.PI / 180 - lon1 * Math.PI / 180;
        const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        const d = R * c;
        return d * 1000;
    }
}

#map {
	height: 90%;
}


/* Optional: Makes the sample page fill the window. */

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

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

泳镜地图矩形叠加层未更新。如何更新叠加层？

0 个答案: