Google maps 多段线(管线)悬停时的工具提示
我做了路线在地图上。使用一些坐标生成的路线,这些坐标包含附加信息(速度)。我想当路线悬停时,会出现一个工具提示,显示这些坐标处的信息(速度)。我搞不清楚如何显示速度的工具提示Google maps 多段线(管线)悬停时的工具提示,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,我做了路线在地图上。使用一些坐标生成的路线,这些坐标包含附加信息(速度)。我想当路线悬停时,会出现一个工具提示,显示这些坐标处的信息(速度)。我搞不清楚如何显示速度的工具提示 <html> <head> <title>Polyline Route v3 Example</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/
<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>
你的“速度”与积分相关联。您有两个选择:
对于第一个选项,是否意味着我必须创建标记作为点的数量?我的意思是,如果我有10个点,那么我必须创建10个标记。是这样吗?是的。这似乎是最简单的(因为速度与这些联系在一起)。谢谢geocodezip先生,这很有效。我已经编辑了我的问题并插入了正确的代码。当我有大约25000个点(坐标)时,显示地图的速度会非常慢。我怎样才能使它更快?或者最好为这个问题创建新的线索?这是另一个问题。对于25000个点,您可能希望在平铺上渲染线条(在服务器上或使用渲染为平铺的Kmlayer或FusionTablesLayer),问题将是创建鼠标悬停处理程序,在这种情况下会更复杂。请参阅文档的“文章”部分。