工具提示Polyline（路线）悬停 [英] Tooltip on Polyline (Route) Hover
本文介绍了工具提示Polyline（路线）悬停的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在地图上制作了路线。使用一些坐标生成的路线，其中完成了附加信息（速度）。我希望路线悬停时，会出现一个工具提示并在这些坐标处显示信息（速度）。我混淆了如何显示速度工具提示。
< html>
< head>
< title> Polyline Route v3示例< / title>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?v=3&sensor=false>< / script>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>< / script>
< script type =text / javascript>
var locations = [
{speed：13，lat： - 6.246192976751192，lon：106.79324626922607}，{speed：33，lat ： - 6.245723710157699，lon：106.79603576660156}，{speed：23，lat： - 6.245723710157699，lon：106.79796695709229}，{speed：43 ，lat： - 6.243334710069922，lon：106.79800987243652}，
{speed：12，lat： - 6.245723810157699，lon：106.79796725709229} ，{speed：1，lat： - 6.245723860157699，lon：106.79796735709229}，{speed：45，lat： - 6.245723890157699，lon 106.79797755709229}，{speed：21，lat： - 6.245723910157699，lon：106.79797895709229}
];
var map;
函数createRouteMap（）{
var listRoute = [];
for（var i = 0; i< locations.length; i ++）{
listRoute.push（new google.maps.LatLng（locations [i] .lat，locations [i] .lon） ）;
}
var mapOptions = {
zoom：16，
center：listRoute [Math.ceil（listRoute.length / 2）]，
mapTypeId：google.maps .MapTypeId.ROADMAP，
};
map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）;
showMap（listRoute）;
createMarkers（地点）;
}
函数showMap（listRoute）{
if（（listRoute.length< 1）||（listRoute == null））{
jQuery（ #map_canvas）。html（'< div class =alert alert-info>< strong> Empty Trail！< / strong>此行程仍然没有踪迹< / div>'+
'< div class =btn-toolbar>< p>< code>汽车中的gps设备< / code>尚未发送位置！< / p>< / div>'）;
} else {
var flightPath = new google.maps.Polyline（{
path：listRoute，
strokeColor：＃FF0000，
strokeOpacity：5，
strokeWeight：3.7
}）;
flightPath.setMap（map）;
函数createMarkers（locations）{
for（var i = 0; i< locations.length; i ++）{
var point = locations [i];
var myLatLng = new google.maps.LatLng（point.lat，point.lon）;
var marker = new google.maps.Marker（{
position：myLatLng，
map：map，
icon：'greencirclemarker.png'，
title：point .speed
}）;
$ b $（document）.ready（function（）{
createRouteMap（）;
}）;
< / script>
< / head>
< body>
< div id =map_canvasstyle =height：400px; border：1px 00f solid;>< / div>
< / body>
< / html>
解决方案
您的速度与点相关。你有几个选择：
$ b $ ol
添加标记并显示标记的mouseover速度（或者作为标记）
使用自己的mouseover事件处理函数将行的每一段渲染为单独的多段线。您需要指定如何将速度应用于线段。有一种更复杂的方法可以通过一条折线来完成，但是使用鼠标悬停事件可能会带来性能问题。
I've made the route on the map. The route generated using some coordinates which completed with additional information (speed). I want when the route is hover, a tooltip will appear and showing information (speed) at those coordinates. I confuse how to display the tooltip of speed.
<html>
<head>
<title>Polyline Route v3 Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var locations = [
{"speed":"13","lat":"-6.246192976751192","lon":"106.79324626922607"}, {"speed":"33","lat":"-6.245723710157699","lon":"106.79603576660156"}, {"speed":"23","lat":"-6.245723710157699","lon":"106.79796695709229"}, {"speed":"43","lat":"-6.243334710069922","lon":"106.79800987243652"},
{"speed":"12","lat":"-6.245723810157699","lon":"106.79796725709229"}, {"speed":"1","lat":"-6.245723860157699","lon":"106.79796735709229"}, {"speed":"45","lat":"-6.245723890157699","lon":"106.79797755709229"}, {"speed":"21","lat":"-6.245723910157699","lon":"106.79797895709229"}
];
var map;
function createRouteMap(){
var listRoute = [];
for (var i = 0; i < locations.length; i++) {
listRoute.push(new google.maps.LatLng(locations[i].lat, locations[i].lon));
}
var mapOptions = {
zoom: 16,
center: listRoute[Math.ceil(listRoute.length/2)],
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
showMap(listRoute);
createMarkers(locations);
}
function showMap(listRoute){
if((listRoute.length < 1) || (listRoute == null)){
jQuery("#map_canvas").html('<div class="alert alert-info"> <strong>Empty Trail!</strong> This trip still has no trail </div>'+
'<div class="btn-toolbar"> <p><code>The gps device </code>in the car still not sent position!</p> </div>');
}else{
var flightPath = new google.maps.Polyline({
path: listRoute,
strokeColor: "#FF0000",
strokeOpacity: 5,
strokeWeight: 3.7
});
flightPath.setMap(map);
}
}
function createMarkers(locations) {
for (var i = 0; i < locations.length; i++) {
var point = locations[i];
var myLatLng = new google.maps.LatLng(point.lat, point.lon);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'greencirclemarker.png',
title: point.speed
});
}
}
$(document).ready(function() {
createRouteMap();
});
</script>
</head>
<body>
<div id="map_canvas" style="height:400px; border:1px 00f solid;"></div>
</body>
</html>
解决方案
Your "speeds" are associated with points. You have a couple of options:
add markers and display the speed on mouseover of the marker (or as a tooltip of the marker)
render each segment of the line as a separate polyline with its own mouseover event handler. You will need to specify how to apply the speeds to the line segments. There are more complicated ways to do it with a single polyline, but with a mouseover event may have performance issues.
这篇关于工具提示Polyline（路线）悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
