Google地图中每条折线的infoWindow不会使用javascript显示
问题描述 投票：0回答：2
我尝试为我的折线显示infoWindow，事实上，我按照执行此任务的所有步骤但仍然没有出现infoWindow ..这里我有几个标记，我在其中创建了路径：
使用Javascript
<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个回答
0
投票
投票
使用发布的代码我得到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>0
投票
投票
正如@geocodezip所提到的那样，当我第一次尝试运行时，我也得到了Cannot read property '__e3_' of undefined错误，并最终得到了一点点。我不确定是否也要为infowindows设置动画或仅仅是在点击每条折线时调用它们，所以下面的代码更复杂，需要只是简单地在折线的位置打开infowindow。
我还修改了为infowindow生成内容的代码，因此它显示了当前路径的详细信息，这可能是预期的结果。
<!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>
通过更改地址栏中的URL，您可以启用/禁用infowindows的动画或启用/禁用poly click事件
markers数据生成。
最新问题
- Web 开发学生：保留 PHP 或学习 Python [已关闭]
- 如何向WPF添加异步任务？
- 创建数据库 Dot Net 6 时出错
- 为什么我执行cdktf部署时出现错误？
- Lombok 如何使用内部 API，而不需要最终用户导出它们？
- 通过 npm 安装 tailwind 后，Tailwind 类无法工作
- Nextjs 公共文件夹
- itextsharp 如何添加完整换行符
- 哪个 TensorFlow 版本与 NumPy 版本==1.18 兼容？
- 如何在 R 中使用自定义调色板 wordcloud 设置颜色数量
- geopandas 可以获取 geopackage（或其他矢量文件）的所有图层吗？
- 是否有任何选项可以向地图添加比例尺？
- 匹配命令开始
- JavaScript 页面重访
- 决策树分类器的底层 sklearn“熵”和“log_loss”标准有区别吗？
- Boost.Asio默认令牌支持导致自由函数调用不明确错误
- 在每个元素的基础上增加迭代器的大小/扩展和映射迭代器
- 通过匹配Twig中的键值获取特定数组元素
- 依次显示各种/随机加载消息
- 这两种类型的向量有什么区别（Julia）
© www.soinside.com 2019 - 2024. All rights reserved.