Google地图矩形可编辑：如何锁定（固定）编辑高度 [英] Google Maps Rectangle editable: how to lock (fixed) height from editing

问题描述

我有一个Google Map，里面有一个可编辑，可移动和可调整大小的矩形。
我正在寻找的是一种锁定矩形给定高度的方法，所以只有
宽度可以改变。

I have a Google Map, in it a rectangle which is editable, moveable and resizable etc. What I am looking for is a way to lock the given height of the rectangle, so only the width can be changed.

推荐答案

您可以防止矩形在JavaScript中使用bounds_changed事件调整高度。

You can prevent the rectangle from resizing the height with the bounds_changed Event in JavaScript.

下面是一个可用的jsfiddle： http://jsfiddle.net/h7ee4368/

Here is a working jsfiddle: http://jsfiddle.net/h7ee4368/

矩形api参考： https://developers.google.com/maps/documentation/javascript/reference?hl=de#Rectangle

JavaScript src：

JavaScript src:

var rectangle;
var originalBounds;
var map;

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(44.5452, -78.5389),
        zoom: 9
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(44.490, -78.649),
        new google.maps.LatLng(44.599, -78.443)
    );

    originalBounds = bounds;

    // Define the rectangle and set its editable property to true.
    rectangle = new google.maps.Rectangle({
        bounds: bounds,
        editable: true,
        draggable: true
    });

    rectangle.setMap(map);

    // Add an event listener on the rectangle.
    google.maps.event.addListener(rectangle, 'bounds_changed', boundsChangedCb);
}

var skipBoundsChangedCb = false;
function boundsChangedCb(event) {
    if(skipBoundsChangedCb) return;

    var ne = rectangle.getBounds().getNorthEast();
    var sw = rectangle.getBounds().getSouthWest();

    var origNe = originalBounds.getNorthEast();
    var origSw = originalBounds.getSouthWest();

    //avoid recursion
    skipBoundsChangedCb = true;

    rectangle.setBounds(new google.maps.LatLngBounds(
        new google.maps.LatLng(ne.lat() - origNe.lat() + origSw.lat(), sw.lng()),
        ne        
    ));

    skipBoundsChangedCb = false;

    origNe = ne;
    origSw = sw;
}

google.maps.event.addDomListener(window, 'load', initialize);

这篇关于Google地图矩形可编辑：如何锁定（固定）编辑高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！