Javascript 在google maps v3中显示鼠标悬停事件的工具提示
我遇到了一个问题，就是在路线上显示带有特定信息的工具提示。我试过infowindow，但它对我不起作用。这就是我尝试过的Javascript 在google maps v3中显示鼠标悬停事件的工具提示,javascript,google-maps-api-3,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.se
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);
}
});
directionsService.route（请求、功能（响应、状态）{
var myRoute=response.routes[0]。legs[0]；
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
对于（var i=0；i这里有一个简单的工作示例。带有
标签的所有内容都是通过
基本上，我们计算出沿直线的一半距离，在其上添加一个不可见的标记，计算直线的长度（以英里和公里为单位），然后在该标记上附加一个标签，当我们悬停在直线上时，该标签会显示出来
<!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>
html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%；宽度：100%}
函数初始化（）{
var homeLatlng=新的google.maps.LatLng（54.42838，-2.9623）；
变量myOptions={
缩放：10，
中心：家庭式，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var homeMarker=new google.maps.Marker({
职位：homeLatlng，
地图：地图，
标题：“安布尔赛德”
});
var latLng1=新的google.maps.LatLng（54.60039，-3.13632）；
var marker=new google.maps.marker({
位置：latLng1，
地图：地图，
标题：“凯斯维克”，
图标：'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png'
});
var StudeStance=计算状态（homeLatlng，latLng1）；
//在马克笔和家之间画一条线。这些线是曲线，不像乌鸦飞的那样，也就是说，它们考虑了地球的曲率（只有在较长的距离上才能看到）
polyline=新的google.maps.polyline({
路径：[homeLatlng，latLng1]，
strokeColor:#FF0000“，
笔划不透明度：0.5，
冲程重量：4，
测地线：正确，
地图：地图
});
//在该标记和主标记之间的中间位置获取点
var-inBetween=google.maps.geometry.spherical.interpolate（homeLatlng，latLng1，0.5）；
var midPointMarker=new google.maps.Marker（{
位置：中间，
地图：地图，
可见：false//NB标记为“不可见”
});
var stulable=新标签（）；
stulable.bindTo（'position'，middpointmarker，'position'）；
stulable.set（'text'，stuDistance.miles+'miles'）；
//让我们添加事件侦听器
google.maps.event.addListener（多段线'mouseover'，function（）{
stulable.setMap（map）；
});
google.maps.event.addListener（多段线'mouseout'，function（）{
stulable.setMap（空）；
});
}
函数计算状态（开始、结束）{
var studistance={}；
stuDistances.meters=google.maps.geometry.spheremic.ComputedDistanceBetween（开始、结束）；//以米为单位的距离四舍五入为1dp
studistance.km=数学圆（studistance.m/1000*10）/10；//以km为单位的距离四舍五入为1dp
studistance.miles=Math.round（studistance.miles/1000*0.6214*10）/10；//以英里为单位的距离四舍五入为1dp
回访学生；
}
//定义从google.maps.OverlayView派生的覆盖
功能标签（选项）{
//初始化
此.setValues（opt_选项）；
//标签特定
var span=this.span=document.createElement（'span'）；
span.style.cssText='位置：相对；左侧：-50%；顶部：-8px；'+
'空白：nowrap；边框：1px纯蓝色；'+
'填充：2px；背景色：白色'；
var div=this.div=document.createElement（'div'）；
子类（span）；
div.style.cssText='位置：绝对；显示：无'；
}
Label.prototype=new google.maps.OverlayView；
//实施onAdd
Label.prototype.onAdd=函数（）{
var pane=this.getPanes（）.overlylayer；
pane.appendChild（this.div)；
//确保在文本或位置更改时重新绘制标签。
var me=这个；
this.listeners=[
google.maps.event.addListener（这个“位置改变了”，
函数（）{me.draw（）；}），
google.maps.event.addListener（这个“text_changed”，
函数（）{me.draw（）；}）
];
};
//在移除时执行
Label.prototype.onRemove=函数（）{
this.div\u.parentNode.removeChild（this.div\u）；
//标签从地图中删除，停止更新其位置/文本。
for（var i=0，i=this.listeners_uu.length；i 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);
}
});