Question

我们需要帮助。目前，当鼠标指向航点标记时，我们的航点弹跳代码可以正常工作。当鼠标指向外部文本时，我们希望它反弹。查看屏幕截图链接：http://screencast.com/t/NPucK50C2y

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?  key=AIzaSyBADaZ6uLiLXx0FokaKyQeV15blaiLDKUI&sensor=false&libraries=places"></script>
<script type="text/javascript">
    var markers=new Array();
    var map;
   function initialize() {
  var bounceTimer;
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
   suppressMarkers : true
 });
   map = new google.maps.Map(document.getElementById('map-canvas'), {
   zoom:7,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [ { featureType:'water', stylers:[{color:'#46bcec'},{visibility:'on'}] },{ featureType:'landscape', stylers:[{color:'#f2f2f2'}] },{ featureType:'road', stylers: [{saturation:-100},{lightness:45}] },{ featureType:'road.highway', stylers: [{visibility:'simplified'}] },{ featureType:'road.arterial', elementType:'labels.icon', stylers: [{visibility:'off'}] },{ featureType:'administrative', elementType:'labels.text.fill', stylers: [{color:'#444444'}] },{ featureType:'transit', stylers:[{visibility:'off'}] },{ featureType:'poi', stylers:[{visibility:'off'}] }],
        });
  directionsDisplay.setMap(map);
 // directionsDisplay.setPanel(document.getElementById('panel'));
  var waypts = [{location:new google.maps.LatLng(1.28644, 103.84663), stopover:true},   {location:new google.maps.LatLng(1.28627, 103.85927), stopover:true}];
 var request = {
  origin: new google.maps.LatLng(1.30365, 103.85256), 
  destination: new google.maps.LatLng(1.29411, 103.84631),
  waypoints: waypts,
  travelMode: google.maps.DirectionsTravelMode.DRIVING
 };
 directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var markerCounter = 1;
    directionsDisplay.setDirections(response);
    // add custom markers
    var route = response.routes[0];
     // start marker
    addMarker(route.legs[0].start_location, markerCounter++);
    // the rest
    for (var i = 0; i < route.legs.length; i++) {
      addMarker(route.legs[i].end_location, markerCounter++);
     }
   }
  });
  function addMarker(position, i) {
   var marker = new google.maps.Marker({
     // @see http://stackoverflow.com/questions/2436484/how-can-i-create-numbered-map-markers-in-google-maps-v3 for numbered icons
     icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + i + '|fff|000000',
     position: position,
     map: map
     });

      google.maps.event.addListener(marker, 'mouseover', function() {
        if (this.getAnimation() == null || typeof this.getAnimation() === 'undefined') {

       //            Because of the google maps bug of moving cursor several times over and out of marker
        //            causes bounce animation to break - we use small timer before triggering the bounce animation
        //            

        clearTimeout(bounceTimer);

        var that = this;
        bounceTimer = setTimeout(function(){
             that.setAnimation(google.maps.Animation.BOUNCE);
        },
        500);
       }
   });

    google.maps.event.addListener(marker, 'mouseout', function() {
        if (this.getAnimation() != null) {
         this.setAnimation(null);
        }
        // If we already left marker, no need to bounce when timer is ready
        clearTimeout(bounceTimer);
     });

    markers.push(marker);

    return marker;
   }
  }

   /*function scrollToMarker(index) {
    map.panTo(markers[index].getPosition());
   }*/

   google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>

   <body>
   <div id="map-canvas" style="float:left; width: 950px; height: 400px; float: left; color:">  </div> 
    <!--<div onclick=scrollToMarker(0)>Pointer 1</div>
  <div onclick=scrollToMarker(1)>Pointer 2</div>
  <div onclick=scrollToMarker(2)>Pointer 3</div>
  <div onclick=scrollToMarker(3)>Pointer 4</div>-->
  <div style="float:left; width:20%; cursor:pointer;">Pointer 1</div>
  <div style="float:left; width:20%; cursor:pointer;">Pointer 2</div>
  <div style="float:left; width:20%; cursor:pointer;">Pointer 3</div>
  <div style="float:left; width:20%; cursor:pointer;">Pointer 4</div>
   </body>
    </html>

Answer 1

<div style="float:left; width:20%; cursor:pointer;" onmouseover="startBounceMarker(1)" onmouseout="stopBounceMarker(1)">Pointer 1</div>
<div style="float:left; width:20%; cursor:pointer;" onmouseover="startBounceMarker(2)" onmouseout="stopBounceMarker(2)">Pointer 2</div>
<div style="float:left; width:20%; cursor:pointer;" onmouseover="startBounceMarker(3)" onmouseout="stopBounceMarker(3)">Pointer 3</div>
<div style="float:left; width:20%; cursor:pointer;" onmouseover="startBounceMarker(4)" onmouseout="stopBounceMarker(4)">Pointer 4</div>

function stopBounceMarker(n) {
  n=n-1;
  if (markers[n].getAnimation() != null) {
     markers[n].setAnimation(null);
  }
}
function startBounceMarker(n) {
  n=n-1;
  if (markers[n].getAnimation() == null || typeof this.getAnimation() === 'undefined') {
    markers[n].setAnimation(google.maps.Animation.BOUNCE);
  }
}

working fiddle

如何在指向外部文本时使航点标记反弹？

1 个答案: