google maps api v3 draggable 마커간에 폴리 라인 그리기

Google지도 v3에 여러 마커가 있습니다. 지도가로드되면 모든 마커와 폴리 라인이 그려집니다. 폴리 라인의 초기 경로는 각 마커의 LatLng와 동일합니다. 마커를 드래그하면 원래 LatLng와 마커의 새 위치 사이에 선을 그려야합니다. 지도의 모든 마커를 움직일 수 있으며 각 마커는 마커의 원래 LatLng을 새로운 위치로 보여주는 별도의 줄을 가져야합니다. 나는 아래의 코드에서 비슷한 일을했지만 문제는 내가 마커를 움직이면 마커의 이전 줄을 잃어 버리는 것이다. 드래그 한 마커는 항상 한 줄만 표시됩니다. 이 문제를 해결하는 방법. 미리 감사드립니다. Ashgoogle maps api v3 draggable 마커간에 폴리 라인 그리기

<!DOCTYPE html> 
<html> 
<head> 
    <title>Marker with line example two</title> 
    <style type="text/css"> 
     html { 
      height: 100%; 
     } 

     body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     #map_canvas { 
      height: 100%; 
     } 
    </style> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script> 
    <script> 
     var line; 
     var myLatlng = new google.maps.LatLng(41.7833, 5.2167); 
     var marker; 
     var lines = []; 
     function initialize() { 
      var domain = [new google.maps.LatLng(11.2583, 75.1374)]; 
      var markers = []; 

      var mapOptions = { 
       zoom: 2, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       opacity: 0.2, 
       disableDefaultUI: true, 
       draggable: false 
      }; 

      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

      var lineCoordinates = [ 
       new google.maps.LatLng(53.215556, 56.949219), 
       new google.maps.LatLng(75.797201, 125.003906), 
       new google.maps.LatLng(37.7833, 144.9667), 
       new google.maps.LatLng(-24.797201, 26.003906), 
       new google.maps.LatLng(27.797201, -101.003906) 
      ]; 

      for (i = 0; i < lineCoordinates.length; i++) { 
       var latLng = lineCoordinates[i], 
        marker = new google.maps.Marker({ 
         position: latLng, 
         draggable: true, 
         title: i.toString(), 
         map: map, 
        }); 
       markers.push({ 
        key: i.toString(), 
        latLng: latLng 
       }); 

       line = new google.maps.Polyline({ 
        path: [latLng, latLng], 
        strokeOpacity: 0.8, 
        strokeWeight: 2, 
        strokeColor: '#f00', 
        geodesic: true      
       }); 
       line.setMap(map); 

       lines.push(line); 

       google.maps.event.addListener(marker, 'drag', function (event) { 
        var title = this.title, 
         result = $.grep(markers, function (e) { return e.key === title }), 
         oldLatLng = result[0].latLng, 
         newLatLng = new google.maps.LatLng(this.getPosition().lat(), this.getPosition().lng()); 

        line.setPath([oldLatLng, newLatLng]); 
       }); 

      } //end of for loop 
     } //end of initialize function 
    </script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width: 1000px; height: 675px; margin-left: 400px; margin-top: 38px;"></div> 
</body> 
</html>

출처

2014-03-05 Ash

방법 lines.push (선)하지 않았다 : 당신은 이벤트 리스너에 대한 변수 line에 대한 폐쇄를 확인해야합니다 여기서 일하고있어. 또한 동일한 기능을 구현하려고합니다. –

거의 다 왔었습니다.

 (function(line) { 
      google.maps.event.addListener(marker, 'drag', function (event) { 
       var title = this.title, 
        result = $.grep(markers, function (e) { return e.key === title }), 
        oldLatLng = result[0].latLng, 
        newLatLng = new google.maps.LatLng(this.getPosition().lat(), this.getPosition().lng()); 

       line.setPath([oldLatLng, newLatLng]); 
      }); 
     })(line);

출처

2014-03-05 18:37:15

이것은 굉장합니다, 당신은 남자입니다 ... 이것은 예상대로 작동하고 있습니다. 고마워요 .- 애쉬 – Ash

google maps api v3 draggable 마커간에 폴리 라인 그리기

답변

관련 문제