javascript - 点和光标之间的线

Question

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

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

在绘制多边形或折线时，Maps Engine 精简版如何从您刚刚单击的点到光标绘制一条线？

我已经查看了 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 ，这些属性的名称不是固定的，可能会更改在下一个 session 中。