-1
コードの上にユーザーが描画した長方形選択の下にあるマーカーを選択してください。質問が明確でない場合は教えてください下記のGoogleマップ
私の要件は、マップ上でユーザーが行った四角形選択の下ですべてのマーカーの情報を取得することです。 （コントロールキー+マウスダウン+マウス移動イベントを使用）
Googleマップにプロットされるマーカーのリストがあります。後でそれを操作するために、私はAPIによって提供されたカスタムオーバーレイを使用しました。それはうまく動作します。
これで、Ctrlキーを押しながらマウスを押し下げて四角形を描くことができるようにする必要があります。マウスが動くと、地図上に矩形が描画され、描画された矩形の下にマーカーがあるかどうかがチェックされます。これも正常に動作します。
しかし、マウスを使用して地図をスクロールすると、値が誤って計算され結果が得られません。すなわち、長方形が適切に描画されない。
私の分析は、マウス移動イベントのPageXとPageYの使い方に問題があります。最初はclientXとclientYを使用しましたが、PageXとPageYを使用したスクロールについては説明しました。
ここで間違っていますか？親切に私に知らせてください。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Proto 1 displaying a list of cameras with custom markers.</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#rectangle {
position: absolute;
border: 1px solid #c1e0ff;
z-index: 100000;
visibility: hidden;
background-color: #c1e0ff;
opacity: 0.5
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBY_Jb6UGbhR1g9cM3uPGStdevUputZh5s"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var map;
/* Need to listen for control key + mouse down + mouse move to draw a rectangle over google map and check for markers below the selection*/
document.addEventListener('keydown', multipleCameraSelection);
function multipleCameraSelection(e) {
if (e.ctrlKey) {
map.setOptions({
draggable: false
});
document.onmousedown = function(event) {
/*get div having ID of rectangle.This is created and added to the overlay image pane of map in the draw() function*/
var rectangleDiv = document.getElementById('rectangle');
/*get the co ordinates where mouse is clicked*/
var initialX = event.pageX;
var initialY = event.pageY;
rectangleDiv.style.left = initialX + 'px';
rectangleDiv.style.top = initialY + 'px';
document.onmousemove = function(event) {
/*on mouse move width and height of rectangle is calculated and set*/
var wid = Math.abs(event.pageX - initialX);
var hei = Math.abs(event.pageY - initialY);
rectangleDiv.style.width = wid + 'px';
rectangleDiv.style.height = hei + 'px';
rectangleDiv.style.visibility = 'visible';
if (event.pageX < initialX && event.pageY >= initialY) {
rectangleDiv.style.left = event.pageX + 'px';
} else if (event.pageY <= initialY && event.pageX >= initialX) {
rectangleDiv.style.top = event.pageY + 'px';
} else if (event.pageY < initialY && event.pageX < initialX) {
rectangleDiv.style.left = event.pageX + 'px';
rectangleDiv.style.top = event.pageY + 'px';
}
}
document.onmouseup = function(event) {
document.onmousedown = null;
document.onmousemove = null;
document.onmouseup = null;
rectangleDiv.style.visibility = 'hidden';
/*get the current left , top value of element*/
var rectPos = getOffsetValues(rectangleDiv);
/*all markers have a name starting with cameraDiv. checking whether they lies between the rectangle drawn*/
$("div[id^='cameraDiv']").each(function(index, value) {
var elemToFind = value;
var elemToFindpos = getOffsetValues(elemToFind);
if ((((rectPos.topValue + rectangleDiv.offsetHeight) > elemToFindpos.topValue) && (rectPos.topValue < elemToFindpos.topValue || rectPos.topValue <= (elemToFindpos.topValue + elemToFind.offsetHeight))) &&
(((rectPos.leftValue + rectangleDiv.offsetWidth) > elemToFindpos.leftValue) && (rectPos.leftValue < elemToFindpos.leftValue || rectPos.leftValue <= (elemToFindpos.leftValue + elemToFind.offsetWidth)))) {
console.log(value);
}
})
map.setOptions({
draggable: true
});
}
}
}
}
function getOffsetValues(elem) {
var left = 0,
top = 0;
while (elem) {
left += elem.offsetLeft;
top += elem.offsetTop;
elem = elem.offsetParent;
}
return {
leftValue: left,
topValue: top
};
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 8.5241,
lng: 76.9366
}
});
overlay = new CameraLayer(map);
//setMarkers(map);
}
var overlay;
CameraLayer.prototype = new google.maps.OverlayView();
function CameraLayer(map) {
this.map_ = map;
this.div_ = null;
this.setMap(map);
//window.alert('constructor called');
}
CameraLayer.prototype.onAdd = function() {
var panes = this.getPanes();
var div = document.createElement('div');
div.style.position = 'absolute';
div.id = 'myCustomdiv';
this.div_ = div;
panes.overlayImage.appendChild(this.div_);
}
CameraLayer.prototype.draw = function() {
/*when a scroll happens replot the markers in correct pixel coordinates using methods exposed by map api*/
while (this.div_.firstChild)
this.div_.removeChild(this.div_.firstChild);
var msgContainer = document.createDocumentFragment();
for (i = 0; i < camerasToPlace.length; i++) {
var lat = camerasToPlace[i];
var lat1 = lat[1];
var lng1 = lat[2];
var latLng = new google.maps.LatLng({
lat: lat1,
lng: lng1
});
var pixelPosition = this.getProjection().fromLatLngToDivPixel(latLng);
//msgContainer.appendChild()
var div1 = document.createElement('div');
div1.id = 'cameraDiv' + i;
div1.style.position = 'absolute';
var img = document.createElement('img');
img.src = 'camera.png';
img.style.position = 'absolute';
//img.style.width = '100%';
//img.style.height = '100%';
div1.style.left = pixelPosition.x + 'px';
div1.style.top = pixelPosition.y + 'px';
//
div1.style.width = '32px';
div1.style.height = '32px';
div1.appendChild(img);
msgContainer.appendChild(div1)
}
/*creating and appending a div to the overlay image , width and height calculated when the mouse move event happens , style applied above*/
var rectDiv = document.createElement('div');
rectDiv.id = 'rectangle';
rectDiv.style.position = 'absolute';
this.div_.appendChild(rectDiv);
/*container holding marker data to plot in map with left and top values*/
this.div_.appendChild(msgContainer);
}
/* a list holding the latitude and longitude values to be used in draw function to plot in map*/
var camerasToPlace = [
['Camera1 located at TVM', 8.545394, 76.883503],
['Camera2 located at TVM', 8.7379, 76.7163],
['Camera3 located at TVM', 8.8932, 76.6141],
['Camera4 located at TVM', 8.7707, 76.8836],
['Camera5 located at TVM', 8.936906, 76.871831],
['Camera6 located at TVM', 8.485295, 76.916806]
];
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</body>
</html>
それを識別するために付加し、定義済みの名前を持っています。目標を達成するために、私は地図内のクリックイベントを使用します。あなたはpageX、pageYについて心配する必要はありません（これはかなり難しいかもしれません）。 –
@EmmanuelDelayあなたの提案はうまくいきました。ありがとうございました –