Question

我创建了一个地图，用户可以在其中单击并拖动以将自由形状折线作为多边形的一部分。但是，我无法将它从我刚刚创建的点延伸到光标的位置。我想实现这个功能。

我目前正在使用自由格式折线的click，mousemove等事件监听器，并且这些监视器在绘图库下被禁用。

在绘制多边形或折线时，Maps Engine Lite从您刚刚单击的点绘制线条到底是怎么回事？

我已经查看了DrawingManager和DrawingOptions，但无法弄清楚它是如何以编程方式显示从点到光标的一条线。

我猜我需要在mousemove上找到光标的坐标，并在该位置和我点击的最后一个点之间画一条线。这是对的吗？

Answer 1

尝试一下：

   //observe click
    google.maps.event.addListener(map,'click',function(e){
      //if there is no Polyline-instance, create a new Polyline
      //with a path set to the clicked latLng
       if(!line){
          line=new google.maps.Polyline({map:map,path:[e.latLng],clickable:false});
       }

       //always push the clicked latLng to the path
       //this point will be used temporarily for the mousemove-event 
       line.getPath().push(e.latLng);
       new google.maps.Marker({map:map,position:e.latLng,
                               draggable:true,
                               icon:{url:'http://maps.gstatic.com/mapfiles/markers2/dd-via.png',
                                     anchor:new google.maps.Point(5,5)}})

    });
    //observe mousemove
    google.maps.event.addListener(map,'mousemove',function(e){
      if(line){
      //set the last point of the path to the mousemove-latLng
        line.getPath().setAt(line.getPath().getLength()-1,e.latLng)
      }
    });

演示：http://jsfiddle.net/doktormolle/4yPDg/

注意：这部分代码是多余的：

var coord = new google.maps.LatLng(option.latLng.lb, option.latLng.mb);

option.latLng已经是google.maps.LatLng，您可以直接使用

var coord = option.latLng;

此外：您永远不应使用mb或lb这些未记录的属性，这些属性的名称不固定，可能会在下一个会话中更改。< / p>

Answer 2

我想出了一个可能的解决方案。它可能不是最优雅的。还有其他想法吗？

google.maps.event.addListener(map, 'click', function(option) {
    var coord = new google.maps.LatLng(option.latLng.lb, option.latLng.mb);

    var connector = new google.maps.Polyline();

    google.maps.event.addListener(map, 'mousemove', function(pt) {
        connector.setMap(null);
        document.getElementById('latlgn').innerHTML = pt.latLng;

        var lineTwoPoints = [
            coord,
            pt.latLng
        ];
        connector.setPath(lineTwoPoints);
        connector.setMap(map);
    });
});

点和光标之间的线

2 个答案: