Question

我的最终目标是允许我的应用的用户在Google地图上绘制一条线，以找到该线的方向（方位角或方向）。

我希望用户能够绘制一条且只有一条线，此时调用另一个函数来返回线的方向。图纸管理器中的POLYLINE选项需要双击才能结束该行，这不是我想要的。

以下代码（contained in this fiddle）的工作原理是，它接受点开始和结束点，然后绘制线。但是，我想在第二次单击之前从起点绘制到当前鼠标位置，以便用户在最终确定之前可以看到该行。如果我取消注释这一行（JS中的第39行）：

Class<?> annotationValue = tableField.getAnnotation(MyAnnotation.class).value();

然后绘制线条，但 点击监听器不再起作用，我无法结束 。

我希望了解为什么如果第39行被注释掉，第二次点击会被听到，但如果该行存在则不会被听到。

完整代码：

if (lineDrawActive == 1) { drawLine(startPt.latLng, currentPt.latLng); }

Answer 1

鼠标位于折线上方，这会吸收点击次数。将折线设置为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);
}

updated fiddle

代码段

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>

mousemover listener禁用Google Maps API中的点击监听器

1 个答案: