2014-09-05 4 views
5

У меня есть карта Google, в ней есть прямоугольник, который можно редактировать, перемещать и изменять размер и т. Д. То, что я ищу, - это способ блокировки данной высоты прямоугольника, поэтому только ширина может быть изменена.Google Maps Rectangle редактируемый: как заблокировать (фиксированную) высоту от редактирования

ответ

3

Вы можете предотвратить изменение размера прямоугольника в высоте с помощью события bounds_changed в JavaScript.

Вот рабочая jsfiddle: http://jsfiddle.net/h7ee4368/

Прямоугольник ссылка апи: https://developers.google.com/maps/documentation/javascript/reference?hl=de#Rectangle

JavaScript ЦСИ:

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); 
+0

@Gustav если этот ответ решил свой вопрос, пожалуйста, рассмотреть вопрос о принятии его, нажав на проверку -отметка. – PSanetra

Смежные вопросы