谷歌地图中每条折线的infoWindow不会使用javascript显示
[英]The infoWindow of each polyline in google maps is not shown using javascript
问题描述
我尝试显示折线的infoWindow，实际上，我已执行了此任务的所有步骤，但仍然没有出现infoWindow。.在这里，我有几个标记，并在其中创建了路径：
Java脚本
<style>
#map
{
height:100%;
width:100%;
}
</style>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBI1yC7eX6bOcbLruLZ224K5X4N-rwznjE&callback=initMap">
</script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script>
var markers = [
//1 Qazvin Takestan
{
"title": 'Qazvin',
"lat": '36.2737',
"lng": '49.9982',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
},
{
"title": 'Takestan_dest',
"lat": '36.0721',
"lng": '49.7013',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
},
//1 Qazvin Takestan kooh 36.066553, 49.638426
{
"title": 'Qazvin',
"lat": '36.2737',
"lng": '49.9982',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
},
{
"title": 'Takestan Kooh_dest',
"lat": '36.066553',
"lng": '49.638426',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان کوه</b>"
},
//2 Takestan Razan
{
"title": 'Takestan_src',
"lat": '36.0721',
"lng": '49.7013',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
},
{
"title": 'Razan',
"lat": '35.3914',
"lng": '49.0337',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: رزن</b>"
},
//3 Takestan Abhar
{
"title": 'Takestan_src',
"lat": '36.0721',
"lng": '49.7013',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
},
{
"title": 'Abhar',
"lat": '36.1525',
"lng": '49.2385',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: ابهر</b>"
},
//4 Abhar zanjan 36.1525° N, 49.2385° E
{
"title": 'Takestan_src',
"lat": '36.1525',
"lng": '49.2385',
"description":"<a href='edit-stations.php?temp_id=2018080250'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b></a>"
},
{
"title": 'Zanjan',
"lat": '36.6830',
"lng": '48.5087',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زنجان</b>"
},
//5 Qazvin Ziaran 36.1185° N, 50.5265
{
"title": 'Qazvin',
"lat": '36.2737',
"lng": '49.9982',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
},
{
"title": 'Ziaran',
"lat": '36.1185',
"lng": '50.5265',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>"
},
//6 Ziaran karaj 35.8400° N, 50.9391° E
{
"title": 'Ziaran',
"lat": '36.1185',
"lng": '50.5265',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>"
},
{
"title": 'karaj',
"lat": '35.8400',
"lng": '50.9391',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: کرج</b>"
},
//7 Qazvin Loshan 36.6294° N, 49.5140° E
{
"title": 'Qazvin',
"lat": '36.2737',
"lng": '49.9982',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
},
{
"title": 'Loshan',
"lat": '36.6294',
"lng": '49.5140',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: لوشان</b>"
},
//8 Qazvin BoeenZahra 35.7677° N, 50.0573° E
{
"title": 'Qazvin',
"lat": '36.2737',
"lng": '49.9982',
"description": "<a href='edit-stations.php?temp_id=2018082145'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b></a>"
},
{
"title": 'BoeenZahra',
"lat": '35.7677',
"lng": '50.0573',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: بویین زهرا</b>"
}
];
var infowindow2;
var poly;
var map;
var marker;
var path;
var vertices;
var polylines = [];
var flightPlanCoordinates;
var zz = 0;
flightPlanCoordinates =[
[
{lat: 36.2737, lng: 49.9982},
{lat: 35.7677, lng: 50.0573}
],
[
{lat: 36.2737, lng: 49.9982},
{lat:36.543726,lng: 49.574846},
{lat: 36.6294, lng: 49.5140}
]
];
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
};
// Define the symbol, using one of the predefined paths ('CIRCLE')
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393'
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
//multi polylines
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//Initialize the Direction Service
var service = new google.maps.DirectionsService();
var hh =0;
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
i = i+1;
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//Initialize the Path Array
path = new google.maps.MVCArray();
//Set the Path Stroke Color
poly = new google.maps.Polyline({
//path: path,
//path: flightPlanCoordinates[hh],
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map,
//strokeColor: '#ec2a04'
strokeWeight: 3.5,
strokeColor: '#38ff45'
});
hh++;
poly.setPath(path);
//poly.setPath(flightPlanCoordinates[0]);
//poly.push(flightPlanCoordinates);
polylines.push(poly);
//polylines[0].setOptions({strokeColor: 'blue'});
//var routeIndex = indexOfRequest(result);
for (var i = 0, len = result.routes[0].overview_path.length ; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
animateCircle(poly);
}
});
}
//polylines[routeIndex].setPath(result.routes[0].overview_path);
}
createInfoWindow(poly, 'polyinfo...test'); //I tried polylines too
google.maps.event.addDomListener(window, 'load', initialize);
}
function createInfoWindow(poly, content) {
google.maps.event.addListener(poly, 'click', function(event) {
// infowindow.content = content;
infowindow2.setContent(content);
// infowindow.position = event.latLng;
infowindow2.setPosition(event.latLng);
infowindow2.open(map);
});
}
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}
function changeRootProperty(pathID,pathStatus)
{
if((pathStatus%2) == 0)
{
polylines[pathID].setOptions({strokeColor: 'red'});
document.getElementById("path"+pathID).innerHTML = "<span class='label label-danger'>غیرفعال</span>";
}
else
{
polylines[pathID].setOptions({strokeColor: '#38ff45'});
document.getElementById("path"+pathID).innerHTML = "<span class='label label-success'>فعال</span>";
}
}
</script>
index.html
<div id="map" style='width:100%;height:340px;'>
</div>
我尝试了很多，但仍然有问题，当我单击标记时，会出现信息窗口，但对于折线却没有。
2 个解决方案
解决方案1
0 已采纳 2018-03-03 14:25:29
使用发布的代码，我得到了javascript错误： Uncaught TypeError: Cannot read property '__e3_' of undefined ，因为DirectionsService是异步的，并且您正在调用createInfoWindow(poly, 'polyinfo...test'); 在其回调函数之外（在创建poly变量之前）。
您想在回调函数中调用它：
function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//Initialize the Path Array
path = new google.maps.MVCArray();
//Set the Path Stroke Color
poly = new google.maps.Polyline({
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map,
//strokeColor: '#ec2a04'
strokeWeight: 3.5,
strokeColor: '#38ff45'
});
hh++;
poly.setPath(path);
polylines.push(poly);
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
animateCircle(poly);
createInfoWindow(poly, 'polyinfo...test'); // <== call it inside the callback function
}
});
一旦我这样做，我得到一个新的错误： Uncaught TypeError: Cannot read property 'setContent' of undefined ，因为变量infowindow2从未初始化，添加到您的initMap功能：
infowindow2 = new google.maps.InfoWindow();
代码段：
var markers = [ //1 Qazvin Takestan { "title": 'Qazvin', "lat": '36.2737', "lng": '49.9982', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>" }, { "title": 'Takestan_dest', "lat": '36.0721', "lng": '49.7013', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>" }, //1 Qazvin Takestan kooh 36.066553, 49.638426 { "title": 'Qazvin', "lat": '36.2737', "lng": '49.9982', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>" }, { "title": 'Takestan Kooh_dest', "lat": '36.066553', "lng": '49.638426', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان کوه</b>" }, //2 Takestan Razan { "title": 'Takestan_src', "lat": '36.0721', "lng": '49.7013', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>" }, { "title": 'Razan', "lat": '35.3914', "lng": '49.0337', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: رزن</b>" }, //3 Takestan Abhar { "title": 'Takestan_src', "lat": '36.0721', "lng": '49.7013', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>" }, { "title": 'Abhar', "lat": '36.1525', "lng": '49.2385', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: ابهر</b>" }, //4 Abhar zanjan 36.1525° N, 49.2385° E { "title": 'Takestan_src', "lat": '36.1525', "lng": '49.2385', "description": "<a href='edit-stations.php?temp_id=2018080250'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b></a>" }, { "title": 'Zanjan', "lat": '36.6830', "lng": '48.5087', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زنجان</b>" }, //5 Qazvin Ziaran 36.1185° N, 50.5265 { "title": 'Qazvin', "lat": '36.2737', "lng": '49.9982', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>" }, { "title": 'Ziaran', "lat": '36.1185', "lng": '50.5265', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>" }, //6 Ziaran karaj 35.8400° N, 50.9391° E { "title": 'Ziaran', "lat": '36.1185', "lng": '50.5265', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>" }, { "title": 'karaj', "lat": '35.8400', "lng": '50.9391', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: کرج</b>" }, //7 Qazvin Loshan 36.6294° N, 49.5140° E { "title": 'Qazvin', "lat": '36.2737', "lng": '49.9982', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>" }, { "title": 'Loshan', "lat": '36.6294', "lng": '49.5140', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: لوشان</b>" }, //8 Qazvin BoeenZahra 35.7677° N, 50.0573° E { "title": 'Qazvin', "lat": '36.2737', "lng": '49.9982', "description": "<a href='edit-stations.php?temp_id=2018082145'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b></a>" }, { "title": 'BoeenZahra', "lat": '35.7677', "lng": '50.0573', "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: بویین زهرا</b>" } ]; var infowindow2; var poly; var map; var marker; var path; var vertices; var polylines = []; var flightPlanCoordinates; var zz = 0; flightPlanCoordinates = [ [{ lat: 36.2737, lng: 49.9982 }, { lat: 35.7677, lng: 50.0573 } ], [{ lat: 36.2737, lng: 49.9982 }, { lat: 36.543726, lng: 49.574846 }, { lat: 36.6294, lng: 49.5140 } ] ]; function initMap() { var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID }; // Define the symbol, using one of the predefined paths ('CIRCLE') // supplied by the Google Maps JavaScript API. var lineSymbol = { path: google.maps.SymbolPath.CIRCLE, scale: 8, strokeColor: '#393' }; map = new google.maps.Map(document.getElementById("map"), mapOptions); var infoWindow = new google.maps.InfoWindow(); infowindow2 = new google.maps.InfoWindow(); //multi polylines var lat_lng = new Array(); var latlngbounds = new google.maps.LatLngBounds(); for (i = 0; i < markers.length; i++) { var data = markers[i]; var myLatlng = new google.maps.LatLng(data.lat, data.lng); lat_lng.push(myLatlng); marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); latlngbounds.extend(marker.position); (function(marker, data) { google.maps.event.addListener(marker, "click", function(e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } map.setCenter(latlngbounds.getCenter()); map.fitBounds(latlngbounds); //Initialize the Direction Service var service = new google.maps.DirectionsService(); var hh = 0; //Loop and Draw Path Route between the Points on MAP for (var i = 0; i < lat_lng.length; i++) { if ((i + 1) < lat_lng.length) { var src = lat_lng[i]; var des = lat_lng[i + 1]; i = i + 1; service.route({ origin: src, destination: des, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { //Initialize the Path Array path = new google.maps.MVCArray(); //Set the Path Stroke Color poly = new google.maps.Polyline({ icons: [{ icon: lineSymbol, offset: '100%' }], map: map, strokeWeight: 3.5, strokeColor: '#38ff45' }); hh++; poly.setPath(path); polylines.push(poly); for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { path.push(result.routes[0].overview_path[i]); } animateCircle(poly); createInfoWindow(poly, 'polyinfo...test'); } }); } } } google.maps.event.addDomListener(window, 'load', initMap); function createInfoWindow(poly, content) { google.maps.event.addListener(poly, 'click', function(event) { infowindow2.setContent(content); infowindow2.setPosition(event.latLng); infowindow2.open(map); }); } // Use the DOM setInterval() function to change the offset of the symbol // at fixed intervals. function animateCircle(line) { var count = 0; window.setInterval(function() { count = (count + 1) % 200; var icons = line.get('icons'); icons[0].offset = (count / 2) + '%'; line.set('icons', icons); }, 20); } function changeRootProperty(pathID, pathStatus) { if ((pathStatus % 2) == 0) { polylines[pathID].setOptions({ strokeColor: 'red' }); document.getElementById("path" + pathID).innerHTML = "<span class='label label-danger'>غیرفعال</span>"; } else { polylines[pathID].setOptions({ strokeColor: '#38ff45' }); document.getElementById("path" + pathID).innerHTML = "<span class='label label-success'>فعال</span>"; } }
html, body, #map { height: 100%; width: 100%; padding: 0px; margin: 0px; background-color: white; }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id='map'></div>
解决方案2
0 2018-03-04 08:47:12
正如@geocodezip所提到的，当我第一次尝试运行此代码时，我也遇到了Cannot read property '__e3_' of undefined错误，但最终让我Cannot read property '__e3_' of undefined 。 我不确定是要设置动画信息窗口还是仅在单击每条折线时调用它们，所以下面的代码更加复杂，只需在折线位置打开信息窗口即可。
我还修改了为信息窗口生成内容的代码，因此它显示了当前路由的详细信息，大概是预期的结果。
<!doctype html>
<html>
<head>
<title>Polyline - animated infowindow & poly click</title>
<meta charset='utf-8' />
<style>
#map{
height:100vh;
width:100%;
}
h2{
font-size:1rem;
margin:0 0 0.25rem 0;
text-decoration:underline;
}
p,p *{
margin:0 auto;
font-size:0.95rem!important;
font-family:calibri,verdana,arial!important;
padding:0!important;
box-sizing:border-box;
}
p + div{
font-size:0.75rem;
font-family:calibri,verdana,arial;
color:gray;
}
</style>
<script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyBI1yC7eX6bOcbLruLZ224K5X4N-rwznjE&callback=initMap'></script>
<script>
var markers = [
//1 Qazvin Takestan
{
"title": 'Qazvin',
"lat": '36.2737',
"lng": '49.9982',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
},
{
"title": 'Takestan_dest',
"lat": '36.0721',
"lng": '49.7013',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
},
//1 Qazvin Takestan kooh 36.066553, 49.638426
{
"title": 'Qazvin',
"lat": '36.2737',
"lng": '49.9982',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
},
{
"title": 'Takestan Kooh_dest',
"lat": '36.066553',
"lng": '49.638426',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان کوه</b>"
},
//2 Takestan Razan
{
"title": 'Takestan_src',
"lat": '36.0721',
"lng": '49.7013',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
},
{
"title": 'Razan',
"lat": '35.3914',
"lng": '49.0337',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: رزن</b>"
},
//3 Takestan Abhar
{
"title": 'Takestan_src',
"lat": '36.0721',
"lng": '49.7013',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
},
{
"title": 'Abhar',
"lat": '36.1525',
"lng": '49.2385',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: ابهر</b>"
},
//4 Abhar zanjan 36.1525° N, 49.2385° E
{
"title": 'Takestan_src',
"lat": '36.1525',
"lng": '49.2385',
"description":"<a href='edit-stations.php?temp_id=2018080250'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b></a>"
},
{
"title": 'Zanjan',
"lat": '36.6830',
"lng": '48.5087',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زنجان</b>"
},
//5 Qazvin Ziaran 36.1185° N, 50.5265
{
"title": 'Qazvin',
"lat": '36.2737',
"lng": '49.9982',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
},
{
"title": 'Ziaran',
"lat": '36.1185',
"lng": '50.5265',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>"
},
//6 Ziaran karaj 35.8400° N, 50.9391° E
{
"title": 'Ziaran',
"lat": '36.1185',
"lng": '50.5265',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>"
},
{
"title": 'karaj',
"lat": '35.8400',
"lng": '50.9391',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: کرج</b>"
},
//7 Qazvin Loshan 36.6294° N, 49.5140° E
{
"title": 'Qazvin',
"lat": '36.2737',
"lng": '49.9982',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
},
{
"title": 'Loshan',
"lat": '36.6294',
"lng": '49.5140',
"description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: لوشان</b>"
},
//8 Qazvin BoeenZahra 35.7677° N, 50.0573° E
{
"title": 'Qazvin',
"lat": '36.2737',
"lng": '49.9982',
"description": "<a href='edit-stations.php?temp_id=2018082145'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b></a>"
},
{
"title": 'BoeenZahra',
"lat": '35.7677',
"lng": '50.0573',
"description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: بویین زهرا</b>"
}
];
</script>
<script>
var infoWindow;
var poly;
var map;
var marker;
var path;
var polylines=[];
var args=getArgs();
var animate_circles=args.hasOwnProperty('circles') && args.circles=='false' ? false : true;
var animate_infowindows=args.hasOwnProperty('animate') && args.animate=='true' ? true : false;
var enable_click=args.hasOwnProperty('click') && args.click=='false' ? false : true;
function initMap() {
var mapOptions = {
center: new google.maps.LatLng( markers[0].lat, markers[0].lng ),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
strokeColor: '#393'
};
map = new google.maps.Map( document.getElementById("map"), mapOptions );
//multi polylines
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for( i = 0; i < markers.length; i++ ) {
var data = markers[i];
var myLatlng = new google.maps.LatLng( data.lat, data.lng );
lat_lng.push( myLatlng );
marker = new google.maps.Marker({
position:myLatlng,
map:map,
title:data.title
});
latlngbounds.extend( marker.position );
}
map.setCenter( latlngbounds.getCenter() );
map.fitBounds( latlngbounds );
var service = new google.maps.DirectionsService();
for( var i = 0; i < lat_lng.length; i++ ) {
if ( ( i + 1 ) < lat_lng.length ) {
var source = lat_lng[i];
var destination = lat_lng[i + 1];
var title=markers[ i ].title +' to ' + markers[ i+1 ].title;
var description=markers[ i ].description;
/* create the infowindow and set the contents */
var infoWindow = new google.maps.InfoWindow();
infoWindow.setMap( null );
infoWindow.setContent(
[
'<h2>'+title+'</h2>',
'<p>'+description+'</p>',
'<div>',
'lat:'+markers[i].lat,
', ',
'lng:'+markers[i].lng,
'</div>'
].join( '' )
);
i++;
/*********************/
/*
route config
*/
var options={
origin: source,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var callback=function( result, status ) {
if( status == google.maps.DirectionsStatus.OK ) {
path = new google.maps.MVCArray();
var poly = new google.maps.Polyline({
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map,
strokeWeight: 3.5,
strokeColor: '#38ff45',
iwin:this /* infowindow - referenced in click event handler and animateCircle */
});
poly.setPath( path );
polylines.push( poly );
for( var i = 0; i < result.routes[0].overview_path.length; i++ ) {
path.push( result.routes[0].overview_path[i] );
}
if( enable_click ){
/* To simply open the infowindow by clicking on the polyline */
google.maps.event.addListener( poly, 'click', function( event ){
/* choose a location - arbitrarily this is approx 1/2 way of path */
var length = this.getLength();
var mid = Math.round( length / 2 );
var pos = this.getAt( mid );
var win = poly.get('iwin');
/* set the infowindow at selected location */
win.setPosition( { lat:pos.lat(), lng:pos.lng() } );
/* open/close infowindow */
openwin.call( this, win, map );
/* change polyline colour */
editpoly.call( this, poly );
/*
bound explicitly to the currently defined path
so we can access it's properties
*/
}.bind( path ) );
}
if( animate_circles ){
animateCircle( poly, path );
}
}//end if
};//end callback
/* invoke the route request */
service.route( options, callback.bind( infoWindow ) );
/*********************/
}//close if
}//close for loop
}//end initMap
function editpoly( poly ){
poly.strokeColor = poly.strokeColor=='#38ff45' ? '#ff0000' : '#38ff45';
}
function openwin( win,map ){
win.getMap()!==null && win.getMap()!=='undefined' ? win.close() : win.open( map )
}
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
// Note: this really thumps the processor after time
function animateCircle( line, obj ) {
var count = 0;
/*
if infowindow is to be animated,
get a reference to the appropriate
infowindow
*/
if( animate_infowindows ){
var iwin=line.get('iwin');
iwin.open( map );
var i=0;
var x=0;
var pos;
}
window.setInterval( function() {
count = ( count + 1 ) % 200;
if( animate_infowindows ){
/*
calculate the approximate percentage along path
to then find the lat/lng from the path at that
position
*/
i = ( ( i + 1 ) % 200 );
x = Math.round( i / 2 / 100 * obj.getLength() );
pos=obj.getAt( x );
this.setPosition( { lat:pos.lat(), lng:pos.lng() } );
}
var icons = line.get('icons');
icons[0].offset = ( count / 2 ) + '%';
line.set( 'icons', icons );
}.bind( iwin ), 20 );
}
/*
get querystring from url and
create object with parameters
in name/value pairs
*/
function getArgs() {
var a = {};
var p = location.search.substring(1).split("&");
for(var i=0; i < p.length;i++) {
var x = p[i].indexOf('=');
if( x == -1 ) continue;
a[ p[ i ].substring( 0, x ) ] = unescape( p[ i ].substring( x + 1 ) );
}
return a;
}
</script>
</head>
<body>
<div id='map'></div>
</body>
</html>
通过更改地址栏中的网址，您可以启用/禁用信息窗口的动画或启用/禁用poly click事件
单击每条折线将打开它自己的信息窗口，因为每条线都被分配了自己的信息窗口。 内容是从原始
markers数据生成的。
变得有点躁狂并且使处理器受到重击，而不仅仅是使圆圈动起来。 每个信息窗口都沿着路径行进-我无法将其准确地绑定到圆a。
使用 javascript 变量设置 img src 以在 Google Maps InfoWindow 中使用
[英]Setting img src using a javascript variable for use in a Google Maps InfoWindow
在InfoWindow中调用JavaScript函数（Google Maps）
[英]Calling a JavaScript function within an InfoWindow (Google Maps)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Google地图v3折线上的Infowindow无法正常工作
Google Maps JavaScript绘制折线
关闭特定的信息窗口/隐藏折线Google Maps API v3
使用 javascript 变量设置 img src 以在 Google Maps InfoWindow 中使用
为Google地图中的每个标记分配信息窗口
InfoWindow在api谷歌地图javascript v3
在InfoWindow中调用JavaScript函数（Google Maps）
Google Maps JavaScript v3 infoWindow无法关闭
Javascript：在Google地图中添加和删除折线？
自定义谷歌地图infowindow使用离子2
相关标签