我正在尝试在谷歌地图上绘制一个矩形并检测是否有任何标记位于该矩形的边界内。
要绘制矩形,请按住 Shift 键,单击并拖动。
我这里有一个工作样本 - http://jsfiddle.net/dbwPQ/3/
为什么仅当矩形是从左下角到右上角或从右上角到左下角绘制时,.contains 方法才返回 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);
//}
}
UPDATE 这有效,但我不知道为什么? 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))
如果您用两个 Angular 扩展一个空的 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>
关于javascript - 谷歌地图拖动矩形来选择标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17673580/
状态:我正在构建一个应用程序,其中需要一个可供用户选择颜色的字段,该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”,并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中,因此使用基
我完全不是程序员,正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3,但我想知道我是否应该升级到Ruby1.9,因为我真的没有任何升级的“遗留”成本。缺点是什么?我是否会遇到与普通gem的兼容性问题,或者甚至其他我不太了解甚至无法预料的问题? 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem,请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问,您可以在以下位置查看:http://www.railsplugins.or
我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频,可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗?为此,表单应该是什么样的?目前我有类似的东西但显然它允许多项选择,而我试图将它限制为只有一个..怎么办? 最佳答案 如果要使用字符串列,让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模
我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我的Rails应用程序中安装了carrierwave。但是,当用户上传多页pdf时,我只希望应用程序获取文档中的第一页并将其转换为jpeg。这可能吗?用什么命令?这是我的uploader。#encoding:utf-8classImageUploader[200,300]##defscale(width,height)##dosomething#end#Createdifferentversionsofyouruploadedfiles:version:thumbdoprocess:resize_to_fill=>[150,210]process:convert=>:jpgdefful
对于用户模型,我有一个过滤器来检查用户的预订状态,该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而,这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时,我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点? 最佳答案 假设booking_status是模型中的枚举字段,您可以使用:过滤器:booking
如何只加载map边界内的标记gmaps4rails?当然,在平移和/或缩放后加载新的。与此直接相关的是,如何获取map的当前边界和缩放级别? 最佳答案 我是这样做的,我只在用户完成平移或缩放后替换标记,如果您需要不同的行为,请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail
这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:HowdoIgeneratealistofnuniquerandomnumbersinRuby?我想做的事:Random.rand(0..10).timesdoputsRandom.rand(0..10)end但如果随机数已经显示过,则无法再次显示。如何最轻松地做到这一点?
当你在类中包含方法名冲突的模块时,它会使用类定义的方法。有没有办法选择我想运行的?moduleBdefself.hello"helloB"endendclassAincludeBdefself.hello"helloA"endendA.hello#=>thisprints"helloA",whatifIwant"helloB"? 最佳答案 Ben,当你在Ruby中调用一个方法(比如hello)时,会发生以下情况:如果接收者的特征类有一个名为hello的方法,它将被调用。如果不是:如果接收者的类有一个名为hello的实例方法,它将被调
我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan