在google maps v3中显示鼠标悬停事件的工具提示

时间:2013-08-02 11:55:19

标签: javascript google-maps-api-3

我遇到了使用特定信息在路线上显示工具提示的问题。我尝试过infowindow,但它对我不起作用。这就是我所尝试的

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/

2 个答案:

答案 0 :(得分:3)

这是一个简单的工作示例。 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>

答案 1 :(得分:0)

  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);
    }
    });