个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
33
4
我的最终目标是允许我的应用的用户在 Google map 上绘制一条线，找到该线的方向(方位 Angular 或航向)。
我希望用户能够绘制一条且仅一条线，此时调用另一个函数来返回线的方向。绘图管理器中的 POLYLINE 选项需要双击才能结束线条，但这不是我想要的。
下面的代码 ( contained in this fiddle ) 的工作原理是它接受起点和终点的点击，然后绘制线条。但是，我想在第二次单击发生之前绘制从起点到当前鼠标位置的线，以便用户可以在完成之前看到该线。如果我取消注释这一行(JS 中的第 39 行):
if (lineDrawActive == 1) { drawLine(startPt.latLng, currentPt.latLng); }
然后绘制了线条，但是点击监听器不再工作，我无法结束线条。
我想了解为什么如果第 39 行被注释掉，第二次点击会被听到，但如果该行存在则不会被听到。
完整代码:
<!DOCTYPE html>
<html>
<head>
<title>Map Practice</title>
<style>
html {
position: relative;
min-height: 100%;
}
#map {
position: absolute;
top: 50px;
bottom: 0px;
right: 0px;
left: 0px;
}
</style>
<script>
var azimuthLine;
function loadMap() {
var myLatlng = {lat: 37.78, lng: -122.44};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: myLatlng
});
google.maps.event.addDomListener(document.getElementById('linedraw'), 'click', function() {
var lineDrawActive = 0;
var startPt, endPt;
if(azimuthLine != undefined) { azimuthLine.setMap(null) }; //if a line exists, delete it
//log the coordinates when the user makes a first click on the map
var listener1 = map.addListener('click', function(clickPt) {
if(lineDrawActive == 0) {
console.log('First click'); //alert user that the first click has been detected
lineDrawActive = 1;
console.dir('Start: '+clickPt.latLng.lat()+', '+clickPt.latLng.lng());
startPt = clickPt;
} else {
console.log('Second click'); //alert user that the click has been detected
endPt = clickPt;
lineDrawActive = 0;
console.dir('Stop: '+clickPt.latLng.lat()+', '+clickPt.latLng.lng());
google.maps.event.removeListener(listener1);
google.maps.event.removeListener(listener2);
drawLine(startPt.latLng, endPt.latLng);
}
});
var listener2 = map.addListener('mousemove', function(currentPt) {
console.log('Mouse moved');
document.getElementById('azimuth').innerHTML = currentPt.latLng;
if (lineDrawActive == 1) {
drawLine(startPt.latLng, currentPt.latLng);
}
});
});
}
function drawLine(startPt, endPt) {
if(azimuthLine != undefined) { azimuthLine.setMap(null) }; //if a line exists, delete it
var azimuthCoordinates = [startPt,endPt];
azimuthLine = new google.maps.Polyline({
path: azimuthCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
azimuthLine.setMap(map);
}
</script>
<!-- Google maps API -->
<script async defer src="https://maps.google.com/maps/api/js?key=AIzaSyCpvhh2O7Kv-wJfcB88JaVzDLUgs1WNrv8&callback=loadMap&libraries=geometry,drawing"></script>
</head>
<body>
<div id="map"></div>
<button id="linedraw">Start</button>
<span id="azimuth">0</span>
</body>
</html>
最佳答案
鼠标位于多段线上，该多段线正在吸收点击。将折线设置为 clickable: false 并且它可以工作(至少按照我的预期)。
function drawLine(startPt, endPt) {
if(azimuthLine != undefined) { azimuthLine.setMap(null) };
var azimuthCoordinates = [startPt,endPt];
azimuthLine = new google.maps.Polyline({
path: azimuthCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
clickable: false // ********************** add this
});
azimuthLine.setMap(map);
}
代码片段:
var azimuthLine;
function initMap() {
var myLatlng = {
lat: 37.78,
lng: -122.44
};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: myLatlng
});
google.maps.event.addDomListener(document.getElementById('linedraw'), 'click', function() {
var lineDrawActive = 0;
var startPt, endPt;
if (azimuthLine != undefined) {
azimuthLine.setMap(null)
};
//log the coordinates when the user makes a first click on the map
var listener1 = map.addListener('click', function(clickPt) {
console.log("click:" + clickPt.latLng.toUrlValue(6));
if (lineDrawActive == 0) {
console.log('First click'); //alert user that the first click has been detected
lineDrawActive = 1;
console.dir('Start: ' + clickPt.latLng.lat() + ', ' + clickPt.latLng.lng());
startPt = clickPt;
} else {
console.log('Second click'); //alert user that the click has been detected
endPt = clickPt;
lineDrawActive = 0;
console.dir('Stop: ' + clickPt.latLng.lat() + ', ' + clickPt.latLng.lng());
google.maps.event.removeListener(listener1);
google.maps.event.removeListener(listener2);
drawLine(startPt.latLng, endPt.latLng);
}
});
var listener2 = map.addListener('mousemove', function(currentPt) {
console.log('Mouse moved');
document.getElementById('azimuth').innerHTML = currentPt.latLng;
if (lineDrawActive == 1) {
drawLine(startPt.latLng, currentPt.latLng);
}
});
});
}
function drawLine(startPt, endPt) {
if (azimuthLine != undefined) {
azimuthLine.setMap(null)
};
var azimuthCoordinates = [startPt, endPt];
azimuthLine = new google.maps.Polyline({
path: azimuthCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
clickable: false
});
azimuthLine.setMap(map);
}/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
position: absolute;
top: 21px;
bottom: 0px;
right: 0px;
left: 0px;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<div id="map"></div>
<button id="linedraw">Start</button>
<span id="azimuth">0</span>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>关于javascript - mousemover 监听器禁用 Google map API 中的点击监听器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43996649/
33
4
0
如果我有一个密集的 mousemove 处理程序 window.moveEventCounter = 0; window.addEventHandler("mousemove", function(e
我创建了一个 jquery 小部件，它允许我将其附加到 Canvas 并记录用户创建的绘图。 我在使用 Firefox 时遇到问题，jQuery 触发的事件不起作用；但 native JavaScri
$("#father").mousemove(function(){ alert("out"); }) 如何只在父级上绑定(bind) mousemove 事件，而不继承子
我遇到了一些奇怪的事情，但我不确定它是否是故意的或者是什么原因造成的。 我正在试验一些 JavaScript，当用户在屏幕上移动鼠标时循环一组图像。我正在使用 jQuery mousemove为了这。
我想是新手问题。 以下代码是我在文档就绪时调用的函数的一部分。它旨在在鼠标移动时永久返回当前鼠标位置的值。 正在发生的奇怪事情:在文档就绪时移动鼠标不会将任何内容记录到控制台。我知道 mouse_mo
我创建了一个 WPF 应用程序，其中关闭了标题栏和镶边。我在整个应用程序周围有一个边框，认为它在某些方面会像 chrome 一样。我尝试做的第一件事是让 mousemove 事件在单击鼠标时捕获鼠标的
想知道是否有适用于移动设备的 mousemove 的等效项，例如 touchmove 或 touchdrag 等。 我在容器中有一个图像，可以使用鼠标移动在悬停时平移该图像。有没有办法也可以针对移动设
如何在 JQuery 中创建鼠标按下并移动时触发的事件？并且每次 mousedown + mousemove 只触发一次？ 最佳答案 更新: 因此，看起来如果您的鼠标不再位于绑定(bind) onmo
我已经实现了一个自定义 NSView(标记为 )并且能够获取 mouseUp:、mouseDown: 和 mouseMoved: 事件。对此，我已 AcceptFirstResponder 返回 YE
我通过以下方式使用事件监听器/处理程序: var _builder_canvas = document.getElementById("Builder"); mouseMove = f
我有一个子类NSView这是子类 NSDocument 的 .xib 文件的一部分，它通过 NSDocumentController 的默认行为变得活跃。的openDocument:方法。在此子类中
正如标题所说，我注意到在我的 Canvas 上，当按下/释放鼠标按钮时，即使我实际上没有移动鼠标，也会触发 mousemove 。问题是，在释放按钮的情况下，它会在 mouseup 之后被触发! 这是
u如何记录鼠标坐标的值？ div = document.querySelector('.div'); div.addEventListener('mousemove', function yo(u)
Private Sub framePDF_MouseMove(ByVal... ) framePDF.BackColor = &H80000012& 所以，框架的颜色正在改变。 当光标远离框架时，我
我正在尝试制作一个特定的 仅当我的鼠标位于 范围内时，元素才保持可见元素并在 内移动元素。如果鼠标在 之外元素或在 内静止元素，那么它应该隐藏 元素。 我正在使用 mousemove事件监听器
我试图获取一个 mousemove 函数来显示当鼠标移动到特定 div 内时我创建的自定义光标元素。自定义光标是我希望它出现在的 div 中的绝对定位 div。我看到的奇怪的事情是我可以从开发人员工具
尝试用头顶摄像头制作一个简单的角色扮演游戏。当我去实现一个 MouseMotionListener 时(这不是我第一次使用 MouseMotionListener)，似乎 mousedMoved Mo
我一直在尝试使用这段代码，就像当您将鼠标悬停在开始按钮上时，它应该将其颜色更改为灰色，但每当我将鼠标悬停在它上面时。什么也没发生，有人能告诉我为什么吗？我没有收到任何错误，编译器似乎无法识别我的鼠标移
我正在尝试从外部小程序获取鼠标移动事件，如下所示: Applet loader = (Applet) new URLClassLoader( new URL[] { new F
我正在用java创建一个游戏。在其中，您控制一个跟随鼠标的方 block 。我想对正方形实现碰撞检测，以便它在 JFrame 内稍微停止，而不是在边缘处。使用箭头键执行此操作非常容易，但我无法使用 m
我是一名优秀的程序员,十分优秀！