我一直试图让听众使用GMaps,但一直遇到一些麻烦。此时单击标记会产生停止的地址,但不会调用处理程序。此外,我还可以使用路线服务来制作标记,以防万一因为影响事件处理的原因
初始化...
function initialize() {
latlng = avgLatLng(load)
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
mapOptions = {
zoom : 10,
center : {lat : latlng['latitude'], lng : latlng['longitude']},
disableDefaultUI : true,
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(load);
calcRoute(load.stops)
}
计算路线......
function calcRoute(stops) {
var markerLocs = [];
var travelMode = google.maps.TravelMode['DRIVING'];
for(var i=0; i<stops.length; i++) {
markerLocs.push({
location : new google.maps.LatLng(stops[i].latitude, stops[i].longitude),
stopover : (i==0 || i==stops.length ? false : true),
});
}
var request = {
origin: markerLocs[0].location,
destination: markerLocs[markerLocs.length-1].location,
waypoints: markerLocs.slice(1, (markerLocs.length-1)),
travelMode: travelMode,
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(map);
}
设置标记......
function setMarkers(load) {
for (var i = 0; i < load.stops.length; i++) {
var markerOptions = {
position: {'lat' : load.stops[i]['latitude'], 'lng' : load.stops[i]['longitude']},
map: map,
animation: google.maps.Animation.DROP,
title: load.stops[i]['city'],
zIndex: i,
clickable: false,
}
var marker = new google.maps.Marker(markerOptions);
google.maps.event.addDomListener(marker, 'mouseout', function() {
console.log('mouseover');
});
google.maps.event.addDomListener(marker, 'click', function() {
console.log('mouseover');
});
}
}
答案 0 :(得分:0)
您的代码中存在一个微不足道的错误。在函数函数setMarkers(load)中,您的标记配置为不响应单击事件:
clickable: false,
应该是:
clickable: true,
您需要设置clickable甚至可以获取mouseOver和MouseOut事件。