我有一个Javascript代码,显示一个带有2个引脚的地图,以及它们之间的一条线作为路线方向,我想在引脚的点击上显示一个信息“Hello World”,我设置了一个函数,如下所述我的代码但是当我点击一个别针时什么都没有显示。 难道我做错了什么?如何让我的图钉在点击时显示信息窗口?感谢
<!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 <button id="refesh-route" class="btn btn-primary doRefresh">Refresh</button> </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>
答案 0 :(得分:1)
您将infoWindow放在标记和地图上;正在显示的地图是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));