設置位於路線上的Google地圖標記的信息窗口（開始點和結束點）

Question

嗨，我在兩個標記之間的代碼中繪製路線。我需要做的是向這兩個標記添加一個點擊事件併爲每個標記設置一個信息窗口。我在很多網站上搜索無法找到解決方案。儘管它繪製標記之間的路線不能爲每個標記設置信息窗口。這裏是我的代碼...

    function mapLocation() { 
         var directionsDisplay; 
         var directionsService = new google.maps.DirectionsService(); 
         var map; 

         function initialize() { 
          directionsDisplay = new google.maps.DirectionsRenderer(); 
          var chicago = new google.maps.LatLng(37.334818, -121.884886); 
          var mapOptions = { 
           zoom: 7, 
           center: chicago 
          }; 
          map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
          directionsDisplay.setMap(map); 
          google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); 
         } 

         function calcRoute() { 
          var start = new google.maps.LatLng(37.334818, -121.884886); 
          //var end = new google.maps.LatLng(38.334818, -181.884886); 
          var end = new google.maps.LatLng(37.441883, -122.143019); 
          var request = { 
           origin: start, 
           destination: end, 
           travelMode: google.maps.TravelMode.DRIVING 
          }; 
          directionsService.route(request, function (response, status) { 
           if (status == google.maps.DirectionsStatus.OK) { 
            directionsDisplay.setDirections(response); 
            directionsDisplay.setMap(map); 
           } else { 
            alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); 
           } 
          }); 
         } 

         google.maps.event.addDomListener(window, 'load', initialize); 
        } 
        mapLocation(); 

Answer 1

你不能只是用InfoWindow添加一個點擊偵聽器。您需要使用DirectionsRenderer的{suppressMarkers}選項，然後解析響應中所需的信息以添加您自己的標記。

從我的例子修改：http://www.geocodezip.com/v3_directions_custom_iconsC.html

代碼片段：

function mapLocation() { 
 
    var directionsDisplay; 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var map; 
 
    var infowindow; 
 

 
    function initialize() { 
 
    directionsDisplay = new google.maps.DirectionsRenderer({ 
 
     suppressMarkers: true 
 
    }); 
 
    var chicago = new google.maps.LatLng(37.334818, -121.884886); 
 
    var mapOptions = { 
 
     zoom: 7, 
 
     center: chicago 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    infowindow = new google.maps.InfoWindow(); 
 
    directionsDisplay.setMap(map); 
 
    google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); 
 
    } 
 

 
    function calcRoute() { 
 
    var start = new google.maps.LatLng(37.334818, -121.884886); 
 
    var end = new google.maps.LatLng(37.441883, -122.143019); 
 
    var waypoint = { 
 
     location: new google.maps.LatLng(37.432334, -121.899574) 
 
    }; 
 
    var waypoint2 = { 
 
     location: new google.maps.LatLng(37.54827, -121.988572) 
 
    }; 
 
    var request = { 
 
     origin: start, 
 
     destination: end, 
 
     waypoints: [waypoint, waypoint2], 
 
     travelMode: google.maps.TravelMode.DRIVING 
 
    }; 
 
    directionsService.route(request, function(response, status) { 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     directionsDisplay.setMap(map); 
 

 
     var startLocation = new Object(); 
 
     var endLocation = new Object(); 
 
     var waypointLocations = []; 
 

 
     // Display start and end markers for the route. 
 
     var legs = response.routes[0].legs; 
 
     for (i = 0; i < legs.length; i++) { 
 
      if (i == 0) { 
 
      startLocation.latlng = legs[i].start_location; 
 
      startLocation.address = legs[i].start_address; 
 
      // createMarker(legs[i].start_location, "start", legs[i].start_address, "green"); 
 
      } 
 
      if (i != 0) { 
 
      var waypoint = {}; 
 
      waypoint.latlng = legs[i].start_location; 
 
      waypoint.address = legs[i].start_address; 
 
      waypointLocations.push(waypoint); 
 
      } 
 
      if (i == legs.length - 1) { 
 
      endLocation.latlng = legs[i].end_location; 
 
      endLocation.address = legs[i].end_address; 
 
      } 
 
      var steps = legs[i].steps; 
 
     } 
 
     createMarker(endLocation.latlng, "end", "special text for end marker", "http://www.google.com/mapfiles/markerB.png") 
 
     createMarker(startLocation.latlng, "start", "special text for start marker", "http://maps.gstatic.com/mapfiles/markers2/marker_greenA.png"); 
 
     for (var i = 0; i < waypointLocations.length; i++) { 
 
      createMarker(waypointLocations[i].latlng, "waypoint " + i, "special text for waypoint marker " + i, "http://www.google.com/mapfiles/marker_yellow.png"); 
 
     } 
 
     } else { 
 
     alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); 
 
     } 
 
    }); 
 
    } 
 

 
    function createMarker(latlng, label, html, url) { 
 
    var contentString = '<b>' + label + '</b><br>' + html; 
 
    var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map, 
 
     icon: url, 
 
     title: label, 
 
     zIndex: Math.round(latlng.lat() * -100000) << 5 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
     infowindow.setContent(contentString); 
 
     infowindow.open(map, marker); 
 
    }); 
 
    } 
 
    google.maps.event.addDomListener(window, 'load', initialize); 
 
} 
 

 

 
// http://www.google.com/mapfiles/markerB.png 
 

 

 
mapLocation();

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input id="routebtn" type="button" value="route" /> 
 
<div id="map-canvas"></div>