포인트와 커서 사이의 선

Question

자유형 폴리 라인을 다각형의 일부로 만들기 위해 사용자가 클릭하여 끌 수있는 맵을 만들었습니다. 그러나 방금 커서를 가리킨 지점에서 연장 선을 볼 수있는 곳으로 가져올 수는 없습니다. 이 기능을 구현하고 싶습니다.

현재 자유형 폴리 라인에 대한 클릭, mousemove 등 이벤트 리스너를 사용하고 있으며 도면 라이브러리에서 사용할 수 없습니다.

지도 엔진 라이트는 방금 클릭 한 지점부터 다각형 또는 폴리 라인을 그리는 동안 커서까지 선을 그립니다.

저는 이미 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처럼이 문서화되지 않은 속성을 사용해서는 안됩니다.

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); 
    }); 
});