2016-09-16 48 views
-2

我已經使用Google地圖Api構建了一個Web應用程序,並獲得了多段線點擊事件的問題。 我試圖給地圖添加一些標記,然後將它們加在一起。我希望如果我點擊多段線,我可以得到作爲該多段線起點和終點的標記。但是,只有一個返回結果相同同爲所有時間我點擊不同polylines.Here我的源代碼:多個Google地圖多段線點擊事件

var locations = [ 
    { title: "Site 1", lat: 16.044137, lng: 108.206511 }, 
    { title: "Site 2", lat: 16.067161, lng: 108.186259 }, 
    { title: "Site 3", lat: 16.063472, lng: 108.215248 }, 
    { title: "Site 4", lat: 16.041847, lng: 108.193539 }, 
    { title: "Site 5", lat: 16.054186, lng: 108.172890 }, 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 14, 
    center: new google.maps.LatLng(16.067161, 108.186259), 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
}); 

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

var polyLineClicked = function (polyline, fromIndex, toIndex) { 
    google.maps.event.addListener(polyline, 'click', function (e) { 
     infowindow.setContent = fromIndex + " to " + toIndex; 
     infowindow.setPosition = event.latLng; 
     infowindow.open(map); 
    }); 
} 
for (var i = 0; i < locations.length; i++) { 
    var position = new google.maps.LatLng(locations[i].lat, locations[i].lng); 
    var marker = new google.maps.Marker({ 
     position: position, 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function (marker, i) { 
     return function() { 
      infowindow.setContent(locations[i].title); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 

    if (i <= locations.length - 2) { 

     var nextPosition = new google.maps.LatLng(locations[i + 1].lat, locations[i + 1].lng); 
     var polyline = new google.maps.Polyline({ 
      path: [position, nextPosition], 
      strokeColor: 'black', 
      strokeOpacity: 1, 
      strokeWeight: 7, 
      map: map, 
      fromPositionIndex: i, 
      toPositionIndex: i+1 
     }); 
     var fromIndex = locations[i].title; 
     var toIndex = locations[i + 1].title; 

     polyLineClicked(polyline, fromIndex, toIndex); 
    } 
} 
+0

張貼的代碼不能正常工作(不顯示任何信息窗口) – geocodezip

回答

1

在你polyLineClicked功能,你重新分配setContent和setPosition兩種,而不是調用infoWindow class methods

var polyLineClicked = function(polyline, fromIndex, toIndex) { 
    google.maps.event.addListener(polyline, 'click', function(e) { 
    // call the methods instead of reassigning 
    infowindow.setContent(fromIndex + " to " + toIndex); 
    infowindow.setPosition(e.latLng); 
    infowindow.open(map); 
    }); 
}; 

jsfiddle

+0

太棒了!非常感謝。 –

+0

如果您發現答案幫助了您,請立即加入! – kaskader