javascript-在Google Maps v3中的鼠标悬停事件上显示工具提示
作者：互联网
我遇到了在路线上显示具有特定信息的工具提示的问题.我尝试过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://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html
基本上,我们计算沿线的一半的距离,在其上添加一个不可见的标记,计算线的长度(以英里和公里为单位),然后在该标记上附加一个Label,当我们将鼠标悬停在该线上时会显示该Label.
<!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>
标签：google-maps-api-3,javascript 来源： https://codeday.me/bug/20191123/2063819.html