클릭하면 마커에서 폴리 라인 그리기 Google지도 API v3

Question

이것은 새로운 방향으로 도전하기 위해 며칠 전에 시도한 post의 후속 조치입니다. 내 목표는 마커를 클릭 할 때 폴리 라인의 원점 위도/경도가 해당 마커와 동일한 위도/경도가되도록하는 것입니다. 내가 마주하고있는 속임수는 라인이 마커의 좌표를 사용하도록 클릭이 존재하는 마커의 for 루프에 라인 생성을 넣을 위치입니다. 이 함수 밖에서 lat/lng 변수를 선언하기 때문에, 줄의 기본값은 for 루프 내 값이 아닌 var oLat = 10.1 var oLng = 22.1입니다. 나는 oLng = parseFloat(this.position.lng().toFixed(4)) 후 내 라인 코드 (아래) 배치 시도했지만 한

for (var i in points) { 
var p = points[i]; 
var latlng = new google.maps.LatLng(p[1], p[2]); 

var marker = new google.maps.Marker({ 
    position: latlng, 
    icon: points[i][3], 
    zIndex: p[5], 
    title: p[0]  
}); 

overviewMarkers.push(marker); 


google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
    infowindow.setContent(points[i][6] + '<div id="infopanel">'+ 
    '<input onclick="addLine();" type=button value="Show Routes">'+ 
    '<input onclick="removeLine();" type=button value="Remove Routes"></div>'); 
     infowindow.open(map, marker) 
    oLat = parseFloat(this.position.lat().toFixed(4)) 
    oLng = parseFloat(this.position.lng().toFixed(4)) 
     }  
    })(marker, i));   
}//end for loop 

다음 내 라인이 늘 그릴 : 여기에 루프 내 현재이다. 라인 코드를 전체 함수 외부에두면 기본값으로 그려집니다. 라인 생성 코드는 (난 그냥 내 var에 온 클릭 값 캡처 것이라는 점을 확인하는 경고를 추가) :

var arrayLine=[] 
var originPoint = [new google.maps.LatLng(oLat,oLng)]; 
var destPoint = [new google.maps.LatLng(51.9279723,4.4904063), 
       new google.maps.LatLng(40.136482, -73.831299), 
       new google.maps.LatLng(34.0204989,-118.4117325)     
       ]; 
var lineSymbol = { 
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW     
}; 

for (var d in destPoint) { 
    var t = destPoint[d]; 

    var linePath = new google.maps.Polyline({ 
    path: [originPoint[0],[t][0]], 
    strokeColor: '#4A484D', 
    strokeOpacity: 1.0, 
    strokeWeight: 2, 
    geodesic: true, 
     icons: [{ 
    icon: lineSymbol, 
    offset: '100%', 
    repeat: '60px' 
    }] 

    }); 
    arrayLine.push(linePath) 

function setLines(map) { 
for (var i = 0; i < arrayLine.length; i++) { 
    arrayLine[i].setMap(map); 
    } 
    } 
    } 
function addLine() { 
setLines(map); 
alert(parseFloat(oLat)); 
} 

나는 구글이 제공하는 complex polyine example 보는 시도를하지만, 그 다음에 좀 더 단순화 된 것 같다 내가 뭘하려고하는지.

Answer 1

1. 마커 클릭 리스너 (마커에 액세스 할 수 있고 위치를 얻을 수 있음)에 폴리 라인을 만들어야합니다.
2. 사용 문서화 방법 (.getPosition(),하지 문서화되지 않은 속성 .position)

for (var i in points) { 
    var p = points[i]; 
    var latlng = new google.maps.LatLng(p[1], p[2]); 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     icon: points[i][3], 
     zIndex: p[5], 
     map: map, 
     title: p[0] 
    }); 

    overviewMarkers.push(marker); 


    google.maps.event.addListener(marker, 'click', (function (marker, i) { 
     return function() { 
      var originPoint = this.getPosition(); 
      var oLat = parseFloat(this.getPosition().lat().toFixed(4)); 
      var oLng = parseFloat(this.getPosition().lng().toFixed(4)); 
      for (var d in destPoint) { 
       var t = destPoint[d]; 

       var linePath = new google.maps.Polyline({ 
        path: [originPoint, [t][0]], 
        strokeColor: '#4A484D', 
        strokeOpacity: 1.0, 
        strokeWeight: 2, 
        geodesic: true, 
        icons: [{ 
         icon: lineSymbol, 
         offset: '100%', 
         repeat: '60px' 
        }], 
        map: map 

       }); 
       arrayLine.push(linePath); 
      } 
      infowindow.setContent(points[i][6] + '<div id="infopanel">' + 
       '<input onclick="addLine();" type=button value="Show Routes">' + 
       '<input onclick="removeLine();" type=button value="Remove Routes"></div>'); 
      infowindow.open(map, marker); 
     }; 
    })(marker, i)); 
} //end for loop 

working fiddle

코드 :

var map; 
 
var arrayLine = []; 
 
var overviewMarkers = []; 
 
var oLat, oLng; 
 

 
function initialize() { 
 
    var myLatlng = new google.maps.LatLng(0, 180); 
 
    var mapOptions = { 
 
    zoom: 1, 
 
    center: myLatlng 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
 

 
    var points = [ 
 
    ['Karachi, Pakistan', 25.0111453, 67.0647043, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png', 'Overview', 1, '<h4>Sample Text</h4'], 
 
    ['Bangkok, Thailand', 13.7246005, 100.6331108, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 
 
     'Overview', 1, '<h4>Sample Text</h4>' 
 
    ], 
 
    ['Rotterdam, Netherlands', 51.9279723, 4.4904063, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>'], 
 
    ['New York, NY, USA', 40.7056308, -73.9780035, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>'], 
 
    ['Memphis, TN, USA', 35.129186, -89.9696395, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>'] 
 
    ]; 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    var originPoint = []; 
 
    // Creates markers 
 
    for (var i in points) { 
 
    var p = points[i]; 
 
    var latlng = new google.maps.LatLng(p[1], p[2]); 
 

 
    var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     icon: points[i][3], 
 
     zIndex: p[5], 
 
     map: map, 
 
     title: p[0] 
 
    }); 
 

 
    overviewMarkers.push(marker); 
 

 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     var originPoint = this.getPosition(); 
 
     var oLat = parseFloat(this.getPosition().lat().toFixed(4)); 
 
     var oLng = parseFloat(this.getPosition().lng().toFixed(4)); 
 
     for (var d in destPoint) { 
 
      var t = destPoint[d]; 
 

 
      var linePath = new google.maps.Polyline({ 
 
      path: [originPoint, [t][0]], 
 
      strokeColor: '#4A484D', 
 
      strokeOpacity: 1.0, 
 
      strokeWeight: 2, 
 
      geodesic: true, 
 
      icons: [{ 
 
       icon: lineSymbol, 
 
       offset: '100%', 
 
       repeat: '60px' 
 
      }], 
 
      map: map 
 

 
      }); 
 
      arrayLine.push(linePath); 
 
     } 
 
     infowindow.setContent(points[i][6] + '<div id="infopanel">' + 
 
      '<input onclick="addLine();" type=button value="Show Routes">' + 
 
      '<input onclick="removeLine();" type=button value="Remove Routes"></div>'); 
 
     infowindow.open(map, marker); 
 
     }; 
 
    })(marker, i)); 
 
    } //end for loop 
 
} 
 
var arrayLine = []; 
 
var originPoint = [new google.maps.LatLng(oLat, oLng)]; 
 
var destPoint = [new google.maps.LatLng(51.9279723, 4.4904063), 
 
    new google.maps.LatLng(40.136482, -73.831299), 
 
    new google.maps.LatLng(34.0204989, -118.4117325) 
 
]; 
 
var lineSymbol = { 
 
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW 
 
}; 
 

 
function addLine() { 
 
    setLines(map); 
 
    // alert(parseFloat(oLat)); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
function setLines(map) { 
 
    for (var i = 0; i < arrayLine.length; i++) { 
 
    arrayLine[i].setMap(map); 
 
    } 
 
} 
 

 
function removeLine() { 
 
    setLines(null); 
 
}

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#panel { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 50%; 
 
    margin-left: -180px; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
} 
 
#infopanel { 
 
    width: 200px; 
 
    height: 60px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="panel"> 
 
    <input onclick="showFactoryMarkers();" type=button value="Show Factories"> 
 
    <input onclick="showCFSMarkers();" type=button value="Show CFS"> 
 
    <input onclick="showPortMarkers();" type=button value="Show Ports"> 
 
    <input onclick="hideMarkers();" type=button value="Hide All"> 
 
</div> 
 
<div id="map-canvas"></div>

,536,913,632 10