Как сделать так, чтобы маркер путевой точки отскакивал при наведении на внешний текст?
Нам нужна помощь. В настоящее время наш подпрыгивающий код путевой точки работает, когда мышь наведена на маркер путевой точки. Мы хотим, чтобы он отскакивал, когда указатель мыши находится на внешнем тексте. Проверьте ссылку на скриншот: 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>
Решение
<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);
}
}
Другие решения
Других решений пока нет …