Нарисуйте полилинию с маркера по клику API Google Карт v3

Question

Это продолжение по сравнению с post Я сделал несколько дней назад, пытаясь пойти на вызов в новом направлении. Моя цель - когда я нажимаю на маркер, я бы хотел, чтобы источник lat/lng моей полилинии был тем же lat/lng, что и этот маркер. Трюк, с которым я сталкиваюсь, заключается в том, где положить создание строки в мой цикл for моих маркеров, где существует клик, чтобы линия использовала координаты маркера, стих объявленного. Поскольку я объявляю переменные lat/lng вне этой функции, по умолчанию значения по умолчанию следующие: var oLat = 10.1 var oLng = 22.1, а не значения внутри цикла for. Вот мой текущий цикл:

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 

Я пытался размещения моего кода линии (ниже) после oLng = parseFloat(this.position.lng().toFixed(4)) но моя линия обыкновение рисовать. Если я сохраню свой код линии вне всей функции, он будет рисовать со значениями по умолчанию. Код создания линии (я добавил предупреждение только, чтобы подтвердить, что мой вар будет захватить на клик значение):

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 что Google предоставляет, но это кажется немного более упрощенным, то что я пытаюсь сделать.

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>