顯示信息窗口的Javascript谷歌地圖API問題

我有一個Javascript代碼，顯示了一個2針腳的地圖和它們之間的一條線作爲路線方向，我想在一個別針的點擊上顯示一個信息「Hello World」我按照我的代碼中所描述的那樣設置了一個函數，但是當我點擊一個pin時沒有任何顯示。我做錯了什麼？如何讓我的針腳在點擊時顯示信息窗口？謝謝顯示信息窗口的Javascript谷歌地圖API問題

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> 
     <title>Vehicle Location</title> 
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    </head> 
    <body> 
     <div class="container">   
      <div class="row"> 
       <div class="col-md-6"> 
        <h3 class="route-heading">Actual Route &nbsp;&nbsp;<button id="refesh-route" class="btn btn-primary doRefresh">Refresh</button>&nbsp;&nbsp;</h3> 
        <div id="map-actual" style="width:100%;height:500px;margin-left:0px;margin-top:20px;"></div> 
       </div> 
       <div class="col-md-6">     
        <div id="map-actual" style="width:100%;height:500px;margin-left:0px;margin-top:13%;"> 
        </div> 
       </div> 
      </div>     
     </div> 
     <script> 
var actualpoly = null; 
var coordinates = [[28.3789289, -80.60056681], [28.37792783, -80.60046333]]; 
$(document).ready(function() { 
    var geoloc = []; 
    for (var i = 0; i < coordinates.length; i++) { 
     geoloc.push(new google.maps.LatLng(coordinates[i][0], coordinates[i][1])); 
    } 
    if (actualpoly !== null) { 
     actualpoly.setMap(null); 
    } 
    actualpoly = createPoly(geoloc, "head", map_actual, "green"); 
    $('#refesh-route').click(function() { 
     var geoloc = []; 
     for (var i = 0; i < coordinates.length; i++) { 
      geoloc.push(new google.maps.LatLng(coordinates[i][0], coordinates[i][1])); 
     } 
     if (actualpoly !== null) { 
      actualpoly.setMap(null); 
     } 
     actualpoly = createPoly(geoloc, "head", map_actual, "green"); 
    }); 
}); 
// Draws a polyline with accordant arrow heads 
function createPoly(path, mode, map, color) { 
    var iconsetngs = { 
     path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW 
    }; 
    var poly = new google.maps.Polyline({ 
     strokeColor: color, 
     strokeOpacity: 0.8, 
     strokeWeight: 3, 
     map: map, 
     path: path, 
     icons: [{ 
      icon: iconsetngs, 
      repeat: '100px', 
      offset: '100%' 
     }] 
    }); 
    //setArrows.load(p, mode); 
    return poly; 
} 
var directionsDisplay, setArrows, map_actual, directionsDisplayActual; 
var directionsService = new google.maps.DirectionsService(); 
var map; 

function initialize() { 
    //Planned direction display 
    directionsDisplay = new google.maps.DirectionsRenderer({ 
     polylineOptions: { 
      strokeColor: 'brown', 
      strokeOpacity: 0.7, 
      strokeWeight: 3 
     }, 
     suppressMarkers: true, 
     suppressPolylines: true 
    }); 
    //actual direction display 
    directionsDisplayActual = new google.maps.DirectionsRenderer({ 
     polylineOptions: { 
      strokeColor: 'brown', 
      strokeOpacity: 0.7, 
      strokeWeight: 3 
     }, 
     suppressMarkers: true, 
     suppressPolylines: true 
    }); 
    var mapCenter = new google.maps.LatLng(coordinates[0][0], coordinates[0][1]); 
    var mapOptions = { 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: mapCenter 
    } 
    map_actual = new google.maps.Map(document.getElementById('map-actual'), mapOptions); 
    calcRoute(); 
} 

function calcRoute() { 
    var start = new google.maps.LatLng(coordinates[0][0], coordinates[0][1]); 
    var end = new google.maps.LatLng(coordinates[0][0], coordinates[0][1]); 
    var waypts = []; 
    for (var i = 1; i < coordinates.length; i++) { 
     waypts.push({ 
      location: new google.maps.LatLng(coordinates[i][0], coordinates[i][1]), 
      stopover: true 
     }); 
    } 
    var request = { 
     origin: start, 
     destination: end, 
     waypoints: waypts, 
     optimizeWaypoints: true, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function (response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      directionsDisplay.setMap(map); 
      directionsDisplayActual.setDirections(response); 
      directionsDisplayActual.setMap(map_actual); 
      var route = response.routes[0]; 
      fx(route); 
     } 
    }); 
} 

function fx(o) { 
    if (o && o.legs) { 
     var p = []; 
     for (l = 0; l < o.legs.length; ++l) { 
      var leg = o.legs[l]; 

      var c = leg.start_location; 

      var marker = new google.maps.Marker({ 
       position: c, 
       //icon: new google.maps.MarkerImage('icons/marker'+(l+1)+'.png'), 
       map: map 
      }); 
      var marker_actual = new google.maps.Marker({ 
       position: c, 
       //icon: new google.maps.MarkerImage('icons/marker'+(l+1)+'.png'), 
       map: map_actual 
      }); 
      var infowindow = new google.maps.InfoWindow(); 
      var html = 'Hello World!';   
      google.maps.event.addListener(marker, 'click', (function (marker, html) { 
       return function() { 
        infowindow.setContent(html); 
        infowindow.open(map, marker); 
       } 
      })(marker, html)); 
     } 
     createPoly(o.overview_path, "head", map, "brown"); 
     $('#refesh-route').click(); 
     $('.doRefresh').click(function() { 
      location.reload(); 
     }); 
    } 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 

    </body> 
</html>

來源

2014-01-07 OussamaLord

您正在把infoWindow放在marker和map上;正在顯示的地圖是map_actual和標記是marker_actual（不知道爲什麼你所擁有的一切的2）

 google.maps.event.addListener(marker_actual, 'click', (function (marker, html) { 
      return function() { 
       infowindow.setContent(html); 
       infowindow.open(map_actual, marker); 
      } 
     })(marker_actual, html));

working example

來源

2014-01-07 11:23:55 geocodezip

太感謝你了，我有2個地圖，這就是爲什麼我有2一切。不管怎麼說，還是要謝謝你。 – OussamaLord

簡單的問題，我有2個標記，我怎樣才能添加不同的文本到不同的引腳？ – OussamaLord

你做了什麼研究？ http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example/3059129#3059129 – geocodezip

顯示信息窗口的Javascript谷歌地圖API問題

回答

相關問題