javascript 在谷歌地图 v3 中显示鼠标悬停事件的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18016301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-27 10:28:07 来源:igfitidea点击:
Show tooltip on mouseover event in google maps v3
提问by ilya.stmn
I've faced a problem of displaying tooltip over route with specific information. I've tried infowindow but it did not worked for me. This what i've tried
我遇到了在路线上显示带有特定信息的工具提示的问题。我试过 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);
}
});
Sample
样本
采纳答案by duncan
Here's a simple working example for you. Everything with the Labelis via http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html
这是一个简单的工作示例。一切都Label通过http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html
Basically we work out the distance half-way along the line, add an invisible marker to it, calculate the length of the line in miles and kilometres, then attach a Label to that marker which gets displayed when we hover over the line.
基本上，我们计算出沿线中途的距离，向其添加一个不可见的标记，以英里和公里为单位计算线的长度，然后将标签附加到该标记上，当我们将鼠标悬停在该线上时会显示该标记。
<!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>
回答by humtum54321
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);
}
});
