Google Maps Marker Listeners

时间:2015-03-29 18:21:30

标签: javascript google-maps

我一直试图让听众使用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');
    });
  }
}

1 个答案:

答案 0 :(得分:0)

您的代码中存在一个微不足道的错误。在函数函数setMarkers(load)中,您的标记配置为不响应单击事件:

clickable: false,

应该是:

clickable: true,

您需要设置clickable甚至可以获取mouseOver和MouseOut事件。