我的最终目标是允许我的应用的用户在 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/