Показать всплывающую подсказку о событии mouseover на картах google v3

У меня возникла проблема отображения подсказки по маршруту с конкретной информацией. Я пробовал инфоиндустрию, но это не сработало для меня. Это то, что я пыталсяПоказать всплывающую подсказку о событии mouseover на картах google v3

directionsService.route(request, function(response, status) { 
    var myRoute = response.routes[0].legs[0]; 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     for (var i = 0; i < myRoute.steps.length; i++) { 
      for (var j = 0; j < myRoute.steps[i].lat_lngs.length; j++) { 
       points.push(myRoute.steps[i].lat_lngs[j]); 
      } 
     } 

     var eventLine = new google.maps.Polyline({ 
      path: points, 
      visible: true, 
      strokeOpacity: 0, 
      zIndex: 1000 
     }); 

     eventLine.setMap(map); 

     google.maps.event.addListener(eventLine, "mouseover", function(event) { 
      alert('mouseover ' + event.latLng); 
      // here i want to show tooltip with location got from event (event.latLng) 

     }); 

    } else { 
     alert("Directions request failed: " + status); 
    } 
});

Образец

http://jsfiddle.net/sH83S/

источник

2013-08-02 ilya.stmn

полилиния не имеет «подсказки», которые вы можете установить легко. Вы можете прикрепить ярлык к строке, например, см. http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html – duncan

Возможный дубликат [Как добавить пользовательскую подсказку для маркера карты Google?] (http: // stackoverflow .com/questions/9581045/how-to-add-custom-tooltip-for-google-map-marker) – geocodezip

[Доказательство концепции] (http://www.geocodezip.com/v3_SO_directionsWithTooltip.html) (отображает широту/долгота при наведении указателя полилинии по направлениям) – geocodezip

Вот простой рабочий пример для вас. Все с Label осуществляется через http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html

В основном мы разрабатываем расстояние на полпути вдоль линии, добавить невидимый маркер к нему, вычислить длину линии в милях и километрах, а затем прикрепить ярлык к этому маркеру, который отображается, когда мы наводим курсор на линию.

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0; padding: 0 } 
#map_canvas { height: 100%; width: 100% } 
</style> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    function initialize() { 
     var homeLatlng = new google.maps.LatLng(54.42838,-2.9623); 
     var myOptions = { 
      zoom: 10, 
      center: homeLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var homeMarker = new google.maps.Marker({ 
      position: homeLatlng, 
      map: map, 
      title:"Ambleside" 
     }); 

     var latLng1 = new google.maps.LatLng(54.60039,-3.13632); 
     var marker = new google.maps.Marker({ 
      position: latLng1, 
      map: map, 
      title:"Keswick", 
      icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png' 
     }); 

     var stuDistance = calculateDistances(homeLatlng, latLng1); 

     // draw line between marker and home. these are curved lines, not as the crow flies, i.e. they take into account the curvature of the earth (only noticable on longer distances) 
     polyline = new google.maps.Polyline({ 
      path: [homeLatlng, latLng1], 
      strokeColor: "#FF0000", 
      strokeOpacity: 0.5, 
      strokeWeight: 4, 
      geodesic: true, 
      map: map 
     }); 

     // get the point half-way between this marker and the home marker 
     var inBetween = google.maps.geometry.spherical.interpolate(homeLatlng, latLng1, 0.5); 
     var midPointMarker = new google.maps.Marker({ 
      position: inBetween, 
      map: map, 
      visible: false // NB the marker is 'invisible' 
     }); 

     var stuLabel = new Label(); 

     stuLabel.bindTo('position', midPointMarker, 'position'); 
     stuLabel.set('text', stuDistance.miles + ' miles'); 

     // lets add event listeners 
     google.maps.event.addListener(polyline, 'mouseover', function() { 
      stuLabel.setMap(map); 
     }); 

     google.maps.event.addListener(polyline, 'mouseout', function() { 
      stuLabel.setMap(null); 
     }); 
    } 


    function calculateDistances(start,end) { 
     var stuDistances = {}; 

     stuDistances.metres = google.maps.geometry.spherical.computeDistanceBetween(start, end); // distance in metres rounded to 1dp 
     stuDistances.km = Math.round(stuDistances.metres/1000 *10)/10; // distance in km rounded to 1dp 
     stuDistances.miles = Math.round(stuDistances.metres/1000 * 0.6214 *10)/10; // distance in miles rounded to 1dp 

     return stuDistances; 
    } 


    // Define the overlay, derived from google.maps.OverlayView 
    function Label(opt_options) { 
     // Initialization 
     this.setValues(opt_options); 

     // Label specific 
     var span = this.span_ = document.createElement('span'); 
     span.style.cssText = 'position: relative; left: -50%; top: -8px; ' + 
          'white-space: nowrap; border: 1px solid blue; ' + 
          'padding: 2px; background-color: white'; 

     var div = this.div_ = document.createElement('div'); 
     div.appendChild(span); 
     div.style.cssText = 'position: absolute; display: none'; 
    } 
    Label.prototype = new google.maps.OverlayView; 

    // Implement onAdd 
    Label.prototype.onAdd = function() { 
     var pane = this.getPanes().overlayLayer; 
     pane.appendChild(this.div_); 

     // Ensures the label is redrawn if the text or position is changed. 
     var me = this; 
     this.listeners_ = [ 
      google.maps.event.addListener(this, 'position_changed', 
       function() { me.draw(); }), 
      google.maps.event.addListener(this, 'text_changed', 
       function() { me.draw(); }) 
     ]; 
    }; 

    // Implement onRemove 
    Label.prototype.onRemove = function() { 
     this.div_.parentNode.removeChild(this.div_); 

     // Label is removed from the map, stop updating its position/text. 
     for (var i = 0, I = this.listeners_.length; i < I; ++i) { 
      google.maps.event.removeListener(this.listeners_[i]); 
     } 
    }; 

    // Implement draw 
    Label.prototype.draw = function() { 
     var projection = this.getProjection(); 
     var position = projection.fromLatLngToDivPixel(this.get('position')); 

     var div = this.div_; 
     div.style.left = position.x + 'px'; 
     div.style.top = position.y + 'px'; 
     div.style.display = 'block'; 

     this.span_.innerHTML = this.get('text').toString(); 
    }; 

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

</head> 
<body> 
    <div id="map_canvas"></div> 
</body> 
</html>

источник

2013-08-02 13:21:51 duncan

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(41.2586, -95.9375), 
    map: map, 
    draggable: true, 
    title: "Omaha" 
    }); 

    } 

    function codeAddress() { 
    //alert("hello"); 
    var sAddress = document.getElementById("inputTextAddress").value; 
    geocoder.geocode({ 'address': sAddress}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     map.fitBounds(results[0].geometry.viewport); 
    } 
    });

источник

2013-10-23 07:02:55 humtum54321

Показать всплывающую подсказку о событии mouseover на картах google v3

ответ

Смежные вопросы