我遇到了使用特定信息在路线上显示工具提示的问题。我尝试过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);
}
});
示例
答案 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);
}
});