Я работаю над Google Maps и хочу реализовать функцию, в которой пользователь может нарисовать прямоугольник/прямоугольник, используя свою мышь, чтобы выбрать регион на карте (например, выбрать несколько файлов в окнах). После выбора я хочу получить все маркеры, которые попадают в регион. Я просматривал как Google Maps api, так и поиск, но я не могу найти решение. Я попытался использовать jQuery Selectable для выбора, но все, что он возвращает, представляет собой кучу div, из которых я не могу определить, выбран ли какой-либо маркер или нет.
Выбор Draw/Rectangle Draw в Картах Google
Ответ 1
Я нашел библиотеку keydragzoom (http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/docs/reference.html) и использовал ее для рисования прямоугольника на странице.
Позже я отредактировал библиотеку и остановил ее от масштабирования выделенной области и вместо этого вернул правильные координаты в событии "dragend". Затем я вручную прокрутил весь маркер на карте, чтобы найти маркеры, которые находятся в этом конкретном регионе. Библиотека не давала мне правильные координаты, и я сделал следующие изменения.
Изменена функция DragZoom до
var prj = null;
function DragZoom(map, opt_zoomOpts) {
var ov = new google.maps.OverlayView();
var me = this;
ov.onAdd = function () {
me.init_(map, opt_zoomOpts);
};
ov.draw = function () {
};
ov.onRemove = function () {
};
ov.setMap(map);
this.prjov_ = ov;
google.maps.event.addListener(map, 'idle', function () {
prj = ov.getProjection();
});
}
и DragZoom.prototype.onMouseUp_ для
DragZoom.prototype.onMouseUp_ = function (e) {
this.mouseDown_ = false;
if (this.dragging_) {
var left = Math.min(this.startPt_.x, this.endPt_.x);
var top = Math.min(this.startPt_.y, this.endPt_.y);
var width = Math.abs(this.startPt_.x - this.endPt_.x);
var height = Math.abs(this.startPt_.y - this.endPt_.y);
var points={
top: top,
left: left,
bottom: top + height,
right: left + width
};
var prj = this.prjov_.getProjection();
// 2009-05-29: since V3 does not have fromContainerPixel,
//needs find offset here
var containerPos = getElementPosition(this.map_.getDiv());
var mapPanePos = getElementPosition(this.prjov_.getPanes().mapPane);
left = left + (containerPos.left - mapPanePos.left);
top = top + (containerPos.top - mapPanePos.top);
var sw = prj.fromDivPixelToLatLng(new google.maps.Point(left, top + height));
var ne = prj.fromDivPixelToLatLng(new google.maps.Point(left + width, top));
var bnds = new google.maps.LatLngBounds(sw, ne);
//this.map_.fitBounds(bnds);
this.dragging_ = false;
this.boxDiv_.style.display = 'none';
/**
* This event is fired when the drag operation ends.
* Note that the event is not fired if the hot key is released before the drag operation ends.
* @name DragZoom#dragend
* @param {GLatLngBounds} newBounds
* @event
*/
google.maps.event.trigger(this, 'dragend', points);
}
};