Fatal编程技术网
  • javascript/
  • Javascript mousemover侦听器在Google Maps API中禁用单击侦听器

Javascript mousemover侦听器在Google Maps API中禁用单击侦听器

javascript google-maps google-maps-api-3

Javascript mousemover侦听器在Google Maps API中禁用单击侦听器,javascript,google-maps,google-maps-api-3,event-listener,Javascript,Google Maps,Google Maps Api 3,Event Listener,我的最终目标是让我的应用程序的用户在谷歌地图上画一条线，找到那条线的方向（方位角或航向） 我希望用户能够画一条线，并且只能画一条线，在这一点上调用另一个函数来返回线的方向。图形管理器中的“多段线”选项需要双击以结束线，而这不是我想要的 下面的代码（）的工作原理是，它接受起点和终点的单击，然后画线。但是，我希望在第二次单击之前，从起点到当前鼠标位置绘制一条线，以便用户可以在完成它之前看到这条线。如果我取消注释这一行（JS中的第39行）： if（lineDrawActive==1）{drawLine

我的最终目标是让我的应用程序的用户在谷歌地图上画一条线，找到那条线的方向（方位角或航向）

我希望用户能够画一条线，并且只能画一条线，在这一点上调用另一个函数来返回线的方向。图形管理器中的“多段线”选项需要双击以结束线，而这不是我想要的

下面的代码（）的工作原理是，它接受起点和终点的单击，然后画线。但是，我希望在第二次单击之前，从起点到当前鼠标位置绘制一条线，以便用户可以在完成它之前看到这条线。如果我取消注释这一行（JS中的第39行）：

if（lineDrawActive==1）{drawLine（startPt.latLng，currentPt.latLng）；}

然后画线，但是单击侦听器不再工作，我无法结束线

我想了解为什么第39行被注释掉后，第二次点击会被听到，但如果有第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>


地图练习
html{
位置：相对位置；
最小高度：100%；
}
#地图{
位置：绝对位置；
顶部：50px；
底部：0px；
右：0px；
左：0px；
}
var azimuthLine；
函数loadMap（）{
var Mylatng={lat:37.78，lng:-122.44}；
map=new google.maps.map（document.getElementById（'map'）{
缩放：8，
中心：myLatlng
});
google.maps.event.addDomListener（document.getElementById（'linedraw'），'click'，function（）{
var lineDrawActive=0；
var startPt，endPt；
if（azimuthLine！=未定义）{azimuthLine.setMap（null）}；//如果存在一行，请将其删除
//当用户第一次单击地图时，记录坐标
var listener1=map.addListener（'click'，函数（clickPt）{
如果（lineDrawActive==0）{
console.log（'First click'）；//通知用户已检测到第一次单击
lineDrawActive=1；
console.dir（'Start:'+单击pt.latLng.lat（）+'，'+单击pt.latLng.lng（））；
startPt=点击PT；
}否则{
console.log（'Second click'）；//通知用户已检测到单击
endPt=点击pt；
lineDrawActive=0；
console.dir（'Stop:'+点击pt.latLng.lat（）+'，'+点击pt.latLng.lng（））；
google.maps.event.removeListener（listener1）；
google.maps.event.removeListener（listener2）；
抽绳（开始拉条，结束拉条）；
}
});
var listener2=map.addListener（'mousemove'，函数（currentPt）{
log（“鼠标移动”）；
document.getElementById（'Axistance'）.innerHTML=currentPt.latLng；
如果（lineDrawActive==1）{
抽绳（起始点拉绳、当前点拉绳）；
}
});
});
}
功能抽绳（起点、终点）{
if（azimuthLine！=未定义）{azimuthLine.setMap（null）}；//如果存在一行，请将其删除
变量方位坐标=[startPt，endPt]；
azimuthLine=新的google.maps.Polyline({
路径：方位坐标，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2
});
azimuthLine.setMap（地图）；
}
开始
0
鼠标位于多段线上方，多段线吸收点击。将多段线设置为
clickable:false
，它就会工作（至少如我所期望的那样）

代码片段：

var-azimuthLine；
函数initMap（）{
var mylatng={
拉脱维亚：37.78，
液化天然气：-122.44
};
map=new google.maps.map（document.getElementById（'map'）{
缩放：8，
中心：myLatlng
});
google.maps.event.addDomListener（document.getElementById（'linedraw'），'click'，function（）{
var lineDrawActive=0；
var startPt，endPt；
if（方位线！=未定义）{
azimuthLine.setMap（空）
};
//当用户第一次单击地图时，记录坐标
var listener1=map.addListener（'click'，函数（clickPt）{
console.log（“单击：”+单击PT.latLng.toUrlValue（6））；
如果（lineDrawActive==0）{
console.log（'First click'）；//通知用户已检测到第一次单击
lineDrawActive=1；
console.dir（'Start:'+单击pt.latLng.lat（）+'，'+单击pt.latLng.lng（））；
startPt=点击PT；
}否则{
console.log（'Second click'）；//通知用户已检测到单击
endPt=点击pt；
lineDrawActive=0；
console.dir（'Stop:'+点击pt.latLng.lat（）+'，'+点击pt.latLng.lng（））；
google.maps.event.removeListener（listener1）；
google.maps.event.removeListener（listener2）；
抽绳（开始拉条，结束拉条）；
}
});
var listener2=map.addListener（'mousemove'，函数（currentPt）{
log（“鼠标移动”）；
document.getElementById（'Axistance'）.innerHTML=currentPt.latLng；
如果（lineDrawActive==1）{
抽绳（起始点拉绳、当前点拉绳）；
}
});
});
}
功能抽绳（起点、终点）{
if（方位线！=未定义）{
azimuthLine.setMap（空）
};
变量方位坐标=[startPt，endPt]；
azimuthLine=新的google.maps.Polyline({
路径：方位坐标，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2，
可点击：false
});
azimuthLine.setMap（地图）；
}
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
位置：绝对位置；
顶部：21px；
底部：0px；
右：0px；
左：0px；
}
/*可选：使示例页面填充窗口*/
html，
身体{
身高：100%；
保证金：0；
填充：0；
}

开始
0
鼠标位于多段线上方，该多段线 
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);
}