小贝子编程

点击事件到多个谷歌地图路线



我需要在地图上添加多个自定义路线，并在用户单击路线时重定向到特定页面。到目前为止，当用户单击航点或自定义标签时，我能够做到这一点，但不能单击路线本身。起初，我尝试通过在每个坐标之间绘制一条折线来构建路线，并且可以将单击事件附加到路线上，但无法在同一张地图上绘制多条路线。使用当前的绘图方法，我可以绘制多条路线，但无法将单击事件附加到其中。任何帮助都非常感谢。

google.maps.event.addListener(directionsRenderer,'click', function (evt) {
console.log('ev', evt);
infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
infowindow.setPosition(evt.latLng);
infowindow.open(map);
})

这是我将点击事件附加到路由但无法绘制多个路由时的初始尝试：小提琴

这是我可以绘制多条路线但没有点击事件的最新尝试：小提琴

代码片段：

function busMaps() {
var directionsService = new google.maps.DirectionsService;
// var places = new google.maps.places.PlacesService(map);
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 51.846437,
lng: -1.210338
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
stylers: [{
saturation: -100
}]
}]
});
var myCoords = {
route1: [
new google.maps.LatLng(52.068903, -1.260588),
new google.maps.LatLng(52.027057, -1.149292),
new google.maps.LatLng(51.996436, -1.162611),
new google.maps.LatLng(51.997970, -1.209802),
new google.maps.LatLng(51.994775, -1.251997),
new google.maps.LatLng(52.017494, -1.309684),
new google.maps.LatLng(51.981498, -1.321367),
new google.maps.LatLng(51.954807, -1.318343),
new google.maps.LatLng(51.924264, -1.324991),
new google.maps.LatLng(51.854053, -1.317165),
new google.maps.LatLng(51.816201, -1.279594)
],
route2: [
new google.maps.LatLng(51.904426, -1.059206),
new google.maps.LatLng(51.896698, -1.150888),
new google.maps.LatLng(51.872638, -1.185954),
new google.maps.LatLng(51.846437, -1.210338),
new google.maps.LatLng(51.824472, -1.239081),
new google.maps.LatLng(51.796790, -1.182005),
new google.maps.LatLng(51.793961, -1.175405),
new google.maps.LatLng(51.757714, -1.221619),
new google.maps.LatLng(51.760187, -1.224629),
new google.maps.LatLng(51.748485, -1.245116),
new google.maps.LatLng(51.767480, -1.259988),
new google.maps.LatLng(51.769385, -1.262244),
new google.maps.LatLng(51.773602, -1.259178),
new google.maps.LatLng(51.769385, -1.262244)
],
route3: [
new google.maps.LatLng(51.770860, -0.942120),
new google.maps.LatLng(51.757360, -0.975366),
new google.maps.LatLng(51.772137, -0.995936),
new google.maps.LatLng(51.779836, -1.011279),
new google.maps.LatLng(51.771619, -1.068480),
new google.maps.LatLng(51.747970, -1.129057),
new google.maps.LatLng(51.761746, -1.181807),
new google.maps.LatLng(51.757714, -1.221619),
new google.maps.LatLng(51.760187, -1.224629),
new google.maps.LatLng(51.748485, -1.245116),
new google.maps.LatLng(51.767480, -1.259988),
new google.maps.LatLng(51.769385, -1.262244),
new google.maps.LatLng(51.773602, -1.259178),
new google.maps.LatLng(51.769363, -1.262420),
],
route4: [
new google.maps.LatLng(51.424203, -0.976910),
new google.maps.LatLng(51.424088, -0.930640),
new google.maps.LatLng(51.453720, -0.905135),
new google.maps.LatLng(51.537599, -0.903588),
new google.maps.LatLng(51.605565, -0.960766),
new google.maps.LatLng(51.576115, -0.989035),
new google.maps.LatLng(51.560421, -0.951550),
new google.maps.LatLng(51.676793, -0.964094),
new google.maps.LatLng(51.757714, -1.221619),
new google.maps.LatLng(51.760187, -1.224629),
new google.maps.LatLng(51.767480, -1.259988),
new google.maps.LatLng(51.769385, -1.262244),
new google.maps.LatLng(51.773602, -1.259178),
new google.maps.LatLng(51.769363, -1.262420),
new google.maps.LatLng(51.748485, -1.245116)
]
};
var routesOptions = {
route1: {
color: '#70cc23'
},
route2: {
color: '#41444b'
},
route3: {
color: '#016a31'
},
route4: {
color: '#ffd900'
}
};
function renderDirections(result, color) {
var directionsRenderer = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: color,
strokeWeight: 4,
clickable: true,
icons: [{
icon: ' '
}]
},
suppressMarkers: true,
infoWindow: infowindow
});
directionsRenderer.setMap(map);
directionsRenderer.setDirections(result);
google.maps.event.addListener(directionsRenderer, 'click', function(evt) {
console.log('ev', evt);
infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
infowindow.setPosition(evt.latLng);
infowindow.open(map);
})
}
function drawMarkers(position, color, course) {
var marker = new google.maps.Marker({
position: position,
clickable: true,
title: 'Click to open ' + course,
label: {
text: course,
fontSize: "0"
},
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: color,
fillOpacity: 1,
strokeWeight: 0,
image: ''
},
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
// console.log('ev', evt);
// infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
// infowindow.setPosition(evt.latLng);
// infowindow.open(map);
// infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
//   'Place ID: ' + place.place_id + '<br>' +
//   place.formatted_address + '</div>');
//   infowindow.open(map, this);
})
redirectTo(marker, marker.label.text);
}
function buildPath(origin, destination, wayPoints, color, route) {
directionsService.route({
origin: origin,
destination: destination,
waypoints: wayPoints,
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
renderDirections(result, color);
}
});
var labelPosition = setLabelPosition(route);
console.log(labelPosition, 'labelPosition');
/*  var marker1 = new MarkerWithLabel({
position: origin,
title: 'Click to open '+ route,
map: map,
labelContent: route,
labelAnchor: new google.maps.Point(0,0),
labelClass: "labels",
labelStyle: {
opacity: 1,
background: color,
'padding': ' 5px 12px',
'font-size': '16px',
'font-weight':'300',
'text-transform':' capitalize',
'color': '#fff',
'border-radius': '4px',
},
icon: " "
});
redirectTo(marker1,marker1.labelContent );*/
}
function redirectTo(element, identifier) {
google.maps.event.addListener(element, 'click', function(evt) {
switch (identifier) {
case 'route1':
alert('click route 1');
break;
case 'route2':
alert('click route 2');
break;
case 'route3':
alert('click route 3');
break;
case 'route4':
alert('click route 4');
break;
}
})
};
function setLabelPosition(course) {
switch (course) {
case 'route1':
return 'labelAnchor: new google.maps.Point(90,20))';
break;
case 'route2':
return '0, 0';
break;
case 'route3':
return '0, 0';
break;
}
}
/* (function() {
var infoMarker = new MarkerWithLabel({
position: {lat: 51.846437, lng: -1.210338},
map: map,
labelContent: 'Select a route to view pick-up & drop-off times',
labelAnchor: new google.maps.Point(0, 0),
labelClass: "infoMarker", // the CSS class for the label
labelStyle: {
'opacity': '1',
'background': '#002f63',
'padding': ' 20px 15px',
'font-size': '16px',
'font-weight':'400',
'width': '200px',
'text-transform':' capitalize',
'color': '#fff',
'border-radius': '6px',
'text-align': 'center',
'z-index':'1000'
},
icon: " "
});

google.maps.event.addListener(infoMarker,'click', function (evt) {
$('.infoMarker').css('display','none');
})
})(); */
Object.keys(myCoords).forEach(function(key) {
var curentOrigin = myCoords[key][0],
curentDestination = myCoords[key][myCoords[key].length - 1],
wayPoints = [],
color = routesOptions[key].color;
// for (var j = 0; j < myCoords[key].length  ; j++) {
//   drawMarkers(myCoords[key][j],color);
// }
for (var j = 1; j < myCoords[key].length - 1; j++) {
wayPoints.push({
location: myCoords[key][j],
stopover: true
});
if (j === myCoords[key].length - 2) {
console.log(curentOrigin)
buildPath(curentOrigin, curentDestination, wayPoints, color, key);
}
}
for (var j = 0; j < myCoords[key].length; j++) {
drawMarkers(myCoords[key][j], color, key);
}
});
var center;
function calculateCenter() {
center = map.getCenter();
}
google.maps.event.addListenerOnce(map, 'idle', function() {
$('.infoMarker').append('<span class="close-btn"></span><div class="routes-icon"></div>');
map.setZoom(9);
calculateCenter();
if ($('body').hasClass('routes')) {
$('.media-holder .main-loading-overlay').fadeOut();
}
});
google.maps.event.addDomListener(window, 'resize', function() {
console.log('center');
setTimeout(function() {
map.setCenter(center);
}, 100);
});
google.maps.event.addDomListener(window, 'scroll', function() {
console.log('center');
setTimeout(function() {
map.setCenter(center);
}, 100);
});
}
google.maps.event.addDomListener(window, 'load', function() {
busMaps();
});
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVBU8xYg4ulXg3HkO7hMjEPKTLVpsUgh0"></script>

使用谷歌地图中的代码点击路线上的事件，并进行修改以允许它创建多个路线而不是更新单个路线(将polylines声明为本地renderDirectionsPolylines，并添加color和course参数)：

function renderDirectionsPolylines(response, color, course) {
var polylines = [];
polylineOptions.strokeColor = color;
for (var i = 0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
var stepPolyline = new google.maps.Polyline(polylineOptions);
for (k = 0; k < nextSegment.length; k++) {
stepPolyline.getPath().push(nextSegment[k]);
}
stepPolyline.setMap(map);
polylines.push(stepPolyline);
google.maps.event.addListener(stepPolyline, 'click', function(evt) {
infowindow.setContent("you clicked on "+course+"<br>" + evt.latLng.toUrlValue(6));
infowindow.setPosition(evt.latLng);
infowindow.open(map);
});
}
}
}

概念验证小提琴

代码片段：

function busMaps() {
var directionsService = new google.maps.DirectionsService;
// var places = new google.maps.places.PlacesService(map);
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 51.846437,
lng: -1.210338
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
stylers: [{
saturation: -100
}]
}]
});
var myCoords = {
route1: [
new google.maps.LatLng(52.068903, -1.260588),
new google.maps.LatLng(52.027057, -1.149292),
new google.maps.LatLng(51.996436, -1.162611),
new google.maps.LatLng(51.997970, -1.209802),
new google.maps.LatLng(51.994775, -1.251997),
new google.maps.LatLng(52.017494, -1.309684),
new google.maps.LatLng(51.981498, -1.321367),
new google.maps.LatLng(51.954807, -1.318343),
new google.maps.LatLng(51.924264, -1.324991),
new google.maps.LatLng(51.854053, -1.317165),
new google.maps.LatLng(51.816201, -1.279594)
],
route2: [
new google.maps.LatLng(51.904426, -1.059206),
new google.maps.LatLng(51.896698, -1.150888),
new google.maps.LatLng(51.872638, -1.185954),
new google.maps.LatLng(51.846437, -1.210338),
new google.maps.LatLng(51.824472, -1.239081),
new google.maps.LatLng(51.796790, -1.182005),
new google.maps.LatLng(51.793961, -1.175405),
new google.maps.LatLng(51.757714, -1.221619),
new google.maps.LatLng(51.760187, -1.224629),
new google.maps.LatLng(51.748485, -1.245116),
new google.maps.LatLng(51.767480, -1.259988),
new google.maps.LatLng(51.769385, -1.262244),
new google.maps.LatLng(51.773602, -1.259178),
new google.maps.LatLng(51.769385, -1.262244)
],
route3: [
new google.maps.LatLng(51.770860, -0.942120),
new google.maps.LatLng(51.757360, -0.975366),
new google.maps.LatLng(51.772137, -0.995936),
new google.maps.LatLng(51.779836, -1.011279),
new google.maps.LatLng(51.771619, -1.068480),
new google.maps.LatLng(51.747970, -1.129057),
new google.maps.LatLng(51.761746, -1.181807),
new google.maps.LatLng(51.757714, -1.221619),
new google.maps.LatLng(51.760187, -1.224629),
new google.maps.LatLng(51.748485, -1.245116),
new google.maps.LatLng(51.767480, -1.259988),
new google.maps.LatLng(51.769385, -1.262244),
new google.maps.LatLng(51.773602, -1.259178),
new google.maps.LatLng(51.769363, -1.262420),
],
route4: [
new google.maps.LatLng(51.424203, -0.976910),
new google.maps.LatLng(51.424088, -0.930640),
new google.maps.LatLng(51.453720, -0.905135),
new google.maps.LatLng(51.537599, -0.903588),
new google.maps.LatLng(51.605565, -0.960766),
new google.maps.LatLng(51.576115, -0.989035),
new google.maps.LatLng(51.560421, -0.951550),
new google.maps.LatLng(51.676793, -0.964094),
new google.maps.LatLng(51.757714, -1.221619),
new google.maps.LatLng(51.760187, -1.224629),
new google.maps.LatLng(51.767480, -1.259988),
new google.maps.LatLng(51.769385, -1.262244),
new google.maps.LatLng(51.773602, -1.259178),
new google.maps.LatLng(51.769363, -1.262420),
new google.maps.LatLng(51.748485, -1.245116)
]
};
var routesOptions = {
route1: {
color: '#70cc23'
},
route2: {
color: '#41444b'
},
route3: {
color: '#016a31'
},
route4: {
color: '#ffd900'
}
};
var renderer = new google.maps.DirectionsRenderer({
suppressPolylines: true,
suppressMarkers: true,
infoWindow: infowindow,
polylineOptions: {
strokeColor: '#C83939',
strokeOpacity: 0,
strokeWeight: 1,
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#C83939',
scale: 3,
strokeOpacity: 1
},
offset: '0',
repeat: '15px'
}]
}
});
function renderDirections(result, color, course) {
renderer.setDirections(result);
renderer.setMap(map);
renderDirectionsPolylines(result, color, course);
console.log(renderer.getDirections());
}
var polylineOptions = {
strokeColor: '#C83939',
strokeOpacity: 1,
strokeWeight: 4
};
function renderDirectionsPolylines(response, color, course) {
var polylines = [];
polylineOptions.strokeColor = color;
for (var i = 0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
var stepPolyline = new google.maps.Polyline(polylineOptions);
for (k = 0; k < nextSegment.length; k++) {
stepPolyline.getPath().push(nextSegment[k]);
}
stepPolyline.setMap(map);
polylines.push(stepPolyline);
google.maps.event.addListener(stepPolyline, 'click', function(evt) {
infowindow.setContent("you clicked on " + course + "<br>" + evt.latLng.toUrlValue(6));
infowindow.setPosition(evt.latLng);
infowindow.open(map);
})
}
}
}
function drawMarkers(position, color, course) {
var marker = new google.maps.Marker({
position: position,
clickable: true,
title: 'Click to open ' + course,
label: {
text: course,
fontSize: "0px"
},
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: color,
fillOpacity: 1,
strokeWeight: 0,
image: ''
},
map: map
});
redirectTo(marker, marker.label.text);
}
function buildPath(origin, destination, wayPoints, color, route) {
directionsService.route({
origin: origin,
destination: destination,
waypoints: wayPoints,
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
renderDirections(result, color, route);
}
});
var labelPosition = setLabelPosition(route);
console.log(labelPosition, 'labelPosition');
}
function redirectTo(element, identifier) {
google.maps.event.addListener(element, 'click', function(evt) {
switch (identifier) {
case 'route1':
alert('click route 1');
break;
case 'route2':
alert('click route 2');
break;
case 'route3':
alert('click route 3');
break;
case 'route4':
alert('click route 4');
break;
}
})
};
function setLabelPosition(course) {
switch (course) {
case 'route1':
return 'labelAnchor: new google.maps.Point(90,20))';
break;
case 'route2':
return '0, 0';
break;
case 'route3':
return '0, 0';
break;
}
}
Object.keys(myCoords).forEach(function(key) {
var curentOrigin = myCoords[key][0],
curentDestination = myCoords[key][myCoords[key].length - 1],
wayPoints = [],
color = routesOptions[key].color;
for (var j = 1; j < myCoords[key].length - 1; j++) {
wayPoints.push({
location: myCoords[key][j],
stopover: true
});
if (j === myCoords[key].length - 2) {
console.log(curentOrigin)
buildPath(curentOrigin, curentDestination, wayPoints, color, key);
}
}
for (var j = 0; j < myCoords[key].length; j++) {
drawMarkers(myCoords[key][j], color, key);
}
});
var center;
function calculateCenter() {
center = map.getCenter();
}
google.maps.event.addListenerOnce(map, 'idle', function() {
$('.infoMarker').append('<span class="close-btn"></span><div class="routes-icon"></div>');
map.setZoom(9);
calculateCenter();
if ($('body').hasClass('routes')) {
$('.media-holder .main-loading-overlay').fadeOut();
}
});
google.maps.event.addDomListener(window, 'resize', function() {
console.log('center');
setTimeout(function() {
map.setCenter(center);
}, 100);
});
google.maps.event.addDomListener(window, 'scroll', function() {
console.log('center');
setTimeout(function() {
map.setCenter(center);
}, 100);
});
}
google.maps.event.addDomListener(window, 'load', function() {
busMaps();
});
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVBU8xYg4ulXg3HkO7hMjEPKTLVpsUgh0"></script>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium