谷歌地图拖动矩形来选择标记
Google maps drag rectangle to select markers
我正试图在谷歌地图上绘制一个矩形，并检测是否有任何标记在矩形的边界内。
若要绘制矩形，请按住shift键，单击并拖动。
我这里有一个工作样品-http://jsfiddle.net/dbwPQ/3/
如果矩形是从左下角到右上角或从右上角到左下角绘制的，那么.contents方法为什么只返回true。
然而，从左上到右下或从右下到左上绘制的相同区域返回false？？？？
if (boundsSelectionArea.contains(markers[key].position))
//if (gribBoundingBox.getBounds().getNorthEast().lat() <= markers[key].position.lat() &&
// gribBoundingBox.getBounds().getSouthWest().lat() >= markers[key].position.lat() &&
// gribBoundingBox.getBounds().getSouthWest().lng() <= markers[key].position.lng() &&
// gribBoundingBox.getBounds().getNorthEast().lng() >= markers[key].position.lng() )
{
//if(flashMovie !== null && flashMovie !== undefined) {
console.log("User selected:" + key + ", id:" + markers[key].id);
//}
} else {
//if(flashMovie !== null && flashMovie !== undefined) {
console.log("User NOT selected:" + key + ", id:" + markers[key].id);
//}
}
更新这很有效，但我不知道为什么？http://jsfiddle.net/dbwPQ/4/
看起来google.maps.Rectangle.getBounds正在返回"无效"；界限
key:Vince posn:(53.801279, -1.5485670000000482) out of bnds:((55.45394132943307, -4.0869140625), (52.72298552457069, 1.7138671875))
key:Vince posn:(53.801279, -1.5485670000000482) in bnds:((52.26815737376817, -4.04296875), (55.65279803318956, 2.2412109375))
如果你用你的两个角扩展一个空的google.maps.LatLng对象，它就会工作：
google.maps.event.addListener(themap, 'mousemove', function (e) {
if (mouseIsDown && shiftPressed) {
if (gribBoundingBox !== null) // box exists
{
bounds.extend(e.latLng);
gribBoundingBox.setBounds(bounds); // If this statement is enabled, I lose mouseUp events
} else // create bounding box
{
bounds = new google.maps.LatLngBounds();
bounds.extend(e.latLng);
gribBoundingBox = new google.maps.Rectangle({
map: themap,
bounds: bounds,
fillOpacity: 0.15,
strokeWeight: 0.9,
clickable: false
});
}
}
});
工作示例
代码片段：
var map;
var markers = {};
var bounds = null;
// add marker to object
var posi = new google.maps.LatLng(53.801279, -1.548567);
var name = 'Vince';
markers[name] = {};
markers[name].id = 1;
markers[name].lat = 53.801279;
markers[name].lng = -1.548567;
markers[name].state = 'Online';
markers[name].position = posi;
markers[name].selected = false;
$(document).ready(function() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(53.801279, -1.548567),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infowindow = new google.maps.InfoWindow();
for (var key in markers) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[key].lat, markers[key].lng),
map: map
});
markers[key].marker = marker;
google.maps.event.addListener(marker, 'click', (function(marker, key) {
return function() {
infowindow.setContent(key);
infowindow.open(map, marker);
}
})(marker, key));
}
// Start drag rectangle to select markers !!!!!!!!!!!!!!!!
var shiftPressed = false;
$(window).keydown(function(evt) {
if (evt.which === 16) { // shift
shiftPressed = true;
}
}).keyup(function(evt) {
if (evt.which === 16) { // shift
shiftPressed = false;
}
});
var mouseDownPos, gribBoundingBox = null,
mouseIsDown = 0;
var themap = map;
google.maps.event.addListener(themap, 'mousemove', function(e) {
if (mouseIsDown && shiftPressed) {
if (gribBoundingBox !== null) // box exists
{
bounds.extend(e.latLng);
gribBoundingBox.setBounds(bounds); // If this statement is enabled, I lose mouseUp events
} else // create bounding box
{
bounds = new google.maps.LatLngBounds();
bounds.extend(e.latLng);
gribBoundingBox = new google.maps.Rectangle({
map: themap,
bounds: bounds,
fillOpacity: 0.15,
strokeWeight: 0.9,
clickable: false
});
}
}
});
google.maps.event.addListener(themap, 'mousedown', function(e) {
if (shiftPressed) {
mouseIsDown = 1;
mouseDownPos = e.latLng;
themap.setOptions({
draggable: false
});
}
});
google.maps.event.addListener(themap, 'mouseup', function(e) {
if (mouseIsDown && shiftPressed) {
mouseIsDown = 0;
if (gribBoundingBox !== null) // box exists
{
var boundsSelectionArea = new google.maps.LatLngBounds(gribBoundingBox.getBounds().getSouthWest(), gribBoundingBox.getBounds().getNorthEast());
for (var key in markers) { // looping through my Markers Collection
// if (boundsSelectionArea.contains(markers[key].marker.getPosition()))
if (gribBoundingBox.getBounds().contains(markers[key].marker.getPosition())) {
//if(flashMovie !== null && flashMovie !== undefined) {
markers[key].marker.setIcon("http://maps.google.com/mapfiles/ms/icons/blue.png")
document.getElementById('info').innerHTML += "key:" + key + " posn:" + markers[key].marker.getPosition() + " in bnds:" + gribBoundingBox.getBounds() + "<br>";
// console.log("User selected:" + key + ", id:" + markers[key].id);
//}
} else {
//if(flashMovie !== null && flashMovie !== undefined) {
markers[key].marker.setIcon("http://maps.google.com/mapfiles/ms/icons/red.png")
document.getElementById('info').innerHTML += "key:" + key + " posn:" + markers[key].marker.getPosition() + " out of bnds:" + gribBoundingBox.getBounds() + "<br>";
// console.log("User NOT selected:" + key + ", id:" + markers[key].id);
//}
}
}
gribBoundingBox.setMap(null); // remove the rectangle
}
gribBoundingBox = null;
}
themap.setOptions({
draggable: true
});
//stopDraw(e);
});
});#map {
height: 500px;
width: 500px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
<div id="info"></div>我对geocodezip的工作版本进行了一些更改。
如果你使用LatLngBounds的"扩展"，当你移动到内部时，它只会变得更大而不会更小。因此，我为每一次鼠标移动生成LatLngBounds以满足我的要求。（我想它可能会以另一种方式进行优化。）
更新：发现另一个问题，如果用户在鼠标向上移动之前释放shift键，那么gridbound就会粘在地图上，在下面的代码中修复了这个问题。
google.maps.event.addListener(themap, 'mousemove', function (e) {
+ if (mouseIsDown && (shiftPressed|| gribBoundingBox != null) ) {
if (gribBoundingBox !== null) // box exists
{
+ var newbounds = new google.maps.LatLngBounds(mouseDownPos,null);
+ newbounds.extend(e.latLng);
+ gribBoundingBox.setBounds(newbounds); // If this statement is enabled, I lose mouseUp events
} else // create bounding box
{
gribBoundingBox = new google.maps.Rectangle({
map: themap,
+ bounds: null,
fillOpacity: 0.15,
strokeWeight: 0.9,
clickable: false
});
}
}
});
google.maps.event.addListener(themap, 'mouseup', function (e) {
+ if (mouseIsDown && (shiftPressed|| gribBoundingBox != null)) {
mouseIsDown = 0;
/*........*/
- 工作小提琴http://jsfiddle.net/7ZxMA/4/
- 演示http://fiddle.jshell.net/7ZxMA/4/show/
更新：找到了另一个你可能感兴趣的场景。
用按钮选择地图。（用户可以点击"选择地图"按钮来选择标记，或者使用移位键来选择标记。）
- 工作小提琴http://jsfiddle.net/7ZxMA/6/
- 演示http://fiddle.jshell.net/7ZxMA/6/show/
您误用了google.maps.LatLngBounds class的构造函数。根据文件，你必须通过两个论点：西南角和东北角。然而，有时你会经过东南角和西北角。这可能对.contains方法产生了影响。
相关文章：
- 取消拖动&选择事件
- 当我单击画布并拖动鼠标时，光标将变为文本选择光标.我该如何防止这种情况发生
- 在拖动之前清除内容选择的跨浏览器方法
- Javascript:当元素中有<选择>时，可拖动元素搞砸了
- 为谷歌浏览器创建拖动选择屏幕截图
- 使 JqGrid 列选择器弹出窗口可拖动
- 在“完整日历”中选择并拖动整周
- 聚合物可拖动与交互.js/阴影DOM选择器
- 防止单击+拖动多个选择列表中的选择
- 如何在当前行中突出显示拖动开始和拖动结束之间的所有单元格，拖动只能是当前选择行
- jquery draggable-拖动时调整选择器大小
- 单击并拖动选择区域
- HTML5可拖动图像”;选择“;在firefox中搞砸了我的拖拽javascript
- 谷歌地图拖动矩形来选择标记
- 如何区分拖动开始和选择开始HTML5画布
- CSS用户选择:在Google Chrome中，none会导致拖动焦点事件
- jQuery UI-可选择与可拖动相结合
- 如何在按住鼠标左键的情况下获取鼠标位置以在web中选择和拖动文本
- 当选择/拖动文本时，停止页面滚动
- 检测鼠标按下是否用于选择拖动
