Javascript 点和光标之间的线

Javascript 点和光标之间的线,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我已经创建了一个地图,用户可以在其中单击并拖动以创建一条自由形式的多段线作为多边形的一部分。然而,我不能把它放在我能看到从我刚才指向你的光标的那条线的地方。我想实现这个功能 我目前正在为自由形式多段线使用click、mousemove等事件侦听器,这些侦听器在图形库下被禁用 在绘制多边形或多段线时,“贴图引擎Lite”如何从刚单击的点到光标绘制直线 我已经浏览了DrawingManager和DrawingOptions,无法理解它是如何以编程方式显示从点到光标的直线的 我猜我需要在mousemo

我已经创建了一个地图,用户可以在其中单击并拖动以创建一条自由形式的多段线作为多边形的一部分。然而,我不能把它放在我能看到从我刚才指向你的光标的那条线的地方。我想实现这个功能

我目前正在为自由形式多段线使用click、mousemove等事件侦听器,这些侦听器在图形库下被禁用

在绘制多边形或多段线时,“贴图引擎Lite”如何从刚单击的点到光标绘制直线

我已经浏览了DrawingManager和DrawingOptions,无法理解它是如何以编程方式显示从点到光标的直线的


我猜我需要在mousemove上找到光标的坐标,并在该位置和我单击的最后一点之间画一条线。这是正确的吗?

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

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);
    });
});
试一试:

   //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)
      }
    });
演示:

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

var coord = new google.maps.LatLng(option.latLng.lb, option.latLng.mb);
option.latLng
已经是一个
google.maps.latLng
,您可以直接使用它

var coord = option.latLng;

此外:您不应该使用这些未记录的属性,如
mb
lb
,这些属性的名称不是固定的,可能会在下一个会话中更改。

我注意到您没有在单击中嵌套mousemove事件。嵌套事件侦听器通常是一个坏主意吗?我不会这么说(只要您正确使用它们,并在冗余时清除它们)