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/

4

2 回答 2

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>
于 2013-08-02T13:21:51.973 回答
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);
    }
    });
于 2013-10-23T07:02:55.590 回答