1

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

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

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

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

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

4

2 回答 2

3

试试看：

   //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;

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

于 2013-10-25T17:13:29.947 回答
0

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

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);
    });
});
于 2013-10-25T16:35:06.667 回答