使用javascript在地图上显示位置 [英] Displaying location on map using javascript
本文介绍了使用javascript在地图上显示位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个应用程序，可以在每个设定的时间间隔内捕获平板电脑的位置并将其存储在数据库中。
然后我写了一个简单的javascript脚本来在地图上显示这些位置并跟踪平板电脑的路线。
但是，除了显示平板电脑的合适路线它还显示了从开始到结束的备用路线和直线。
以下是我的javascript代码。
非常欢迎任何帮助。
我尝试过：
var markers = [< br />
{< br />
title：'16：58'，< br />
lat：' - 20.1672799707871'，< br />
lng：'57 .5069032768888'，< br />
description：'16：58'< br />
}< br />
，< br />
{< br />
title：'17：00'，< br />
lat：' - 20.170670813731 ，< br />
lng：'57 .5032840805832'，< br />
description：'17：00'< br />
}< br / >
，< br />
{< br />
title：'17：01'，< br />
lat：' - 20.1712602810727'，< br />
lng：'57 .502503950733'，< br />
description：'17：01'< br />
}< br />
，< br />
{< br />
title：'17：04'，< br />
lat： '20.166955925865'，< br />
lng：'57 .4892648490453'，< br />
description：'17：04'< br />
} < br />
，< br />
{< br />
title：'17：07'，< br />
lat ：' - 20.1761991610139'，< br />
lng：'57 .4822988090064'，< br />
description：'17：07'< br />
}< br />
，< br />
{< br />
title：'17：10'，< br />
lat：' - 20 .1961753165077'，< br />
lng：'57 .4824656045157'，< br />
description：'17：10'< br />
}< ; br />
，< br />
{< br />
title：'17：13'，< br />
lat ：' - 20.220309405427'，< br />
lng：'57 .487469732469'，< br />
description：'17：13'< br />
}< br />
，< br />
{< br />
title：'17：16'，< br />
lat：' - 20.2342861943874'，< br />
lng：'57 .4996038055266'，< br />
description：'17：16'< br />
}< br />
，< br />
{< br />
title：'17：19'，< br />
lat：' - 20.2419951166671'，< br />
lng：'57 .4924547310887'，< br />
description：'17：19'< br />
}< br />
，< br />
{< br />
title：'17：22'，< br />
lat：' - 20.2418197976697'，< br />
lng：'57 .4838445649936'，< br />
description：'17：22'< br />
}< br />
，< br />
{< br />
title：'17：25'，< br />
lat：' - 20.2417927882899'，< br />
lng：'57 .4821667460937'，< br />
description：'17：25'< br / >
}< br />
，< br />
{< br />
title：'17：28'，< br />
lat：' - 20.244868944177'，< br />
lng：'57 .4761929726994'，< br />
description：'17：28'< br />
}< br />
，< br />
{< br />
title：'17：31'，< br />
lat：' - 20.2494147017248'，< br />
lng：'57 .4751336596163'，< br />
description：'17：31' < br />
}< br />
，< br />
{< br />
title：'17：34'，< ; br />
lat：' - 20.2529453707358'，< br />
lng：'57 .4698643969492'，< br />
description：'17： 34'< br />
}< br />
，< br />
{< br />
title：'17：37' ，< br />
lat：' - 20.2515653985995'，< br />
lng：'57 .4694827601669'，< br />
description：' 17:37'< br />
}< br />
];< br />
< br />
window.onload = function（） {< br />
var mapOptions = {< br />
center：new google.maps.LatLng（markers [0] .lat，markers [0] .lng），< br />
zoom：10，< br />
mapTypeId：google.maps.MapTypeId.ROADMAP< br />
};< br />
< br />
var map = new google.maps.Map（document.getElementById（dvMap），mapOptions）;< br />
var infoWindow = new google.maps.InfoWindow（）;< ; br />
var lat_lng = new Array（）;< br />
var latlngbounds = n ew google.maps.LatLngBounds（）;< br />
< br />
for（i = 0;我< markers.length; i ++）{< br />
var data = markers [i]< br />
var myLatlng = new google.maps.LatLng（data.lat，data.lng）;< br />
< br />
lat_lng.push（myLatlng）;< br />
< br />
var marker = new google.maps.Marker（ {< br />
position：myLatlng，< br />
map：map，< br />
title：data.title< br />
} ）;< br />
latlngbounds.extend（marker.position）;< br />
（函数（标记，数据）{< br />
google.maps。 event.addListener（marker，click，function（e）{< br />
infoWindow.setContent（data.description）;< br />
infoWindow.open（map，marker） ;< br />
}）;< br />
}）（标记，数据）;< br />
}< br />
< ; br />
map.setCenter（latlngbounds.getCenter（））;< br />
map.fitBounds（latlngbounds）;< br />
< br />
// *********** ROUTING **************** //< br />
< br />
//初始化路径数组< br />
var path = new google.maps.MVCArray（）;< br />
< br />
//初始化Direction Service< br />
var service = new google.maps.DirectionsService（）;< br />
< br />
//设置路径描边颜色< br />
var poly = new google.maps.Polyline（{map：map，strokeColor：'＃4986E7'}）;< br />
< br />
// MAP上的点之间的循环和绘制路径路径< br />
for（var i = 0;我< lat_lng.length; i ++）{< br />
if（（i + 1）< lat_lng.length）{< br />
var src = lat_lng [i];< br />
var des = lat_lng [i + 1];< br />
< br />
path.push（src）;< br />
poly.setPath（路径）;< br />
< br />
service.route（{< br />
origin：src，< br />
destination： des，< br />
travelMode：google.maps.DirectionsTravelMode.DRIVING< br />
}，function（result，status）{< br />
if（status = = google.maps.DirectionsStatus.OK）{< br />
for（var i = 0，len = result.routes [0] .overview_path.length; i< len; i ++）{< br />
path.push（result.routes [0] .overview_path [i]）;< br />
}< br />
}< br />
}）;< br />
}< br />
}< br />
}
解决方案
看看这个： HTML5 Geolocation [ ^
Hi,
I have an application which captures the location of a tablet every set interval of time and stores them in a database.
I then wrote a simple javascript script to display those locations on a map and trace the route of the tablet.
However, besides displaying the appropriate route of the tablet it also displays alternate routes and a straight line from start to finish.
Below is my javascript code.
Any help would be most welcome.
What I have tried:
var markers = [<br />
{<br />
"title": '16:58',<br />
"lat": '-20.1672799707871',<br />
"lng": '57.5069032768888',<br />
"description": '16:58'<br />
}<br />
,<br />
{<br />
"title": '17:00',<br />
"lat": '-20.170670813731',<br />
"lng": '57.5032840805832',<br />
"description": '17:00'<br />
}<br />
,<br />
{<br />
"title": '17:01',<br />
"lat": '-20.1712602810727',<br />
"lng": '57.502503950733',<br />
"description": '17:01'<br />
}<br />
, <br />
{<br />
"title": '17:04',<br />
"lat": '-20.166955925865',<br />
"lng": '57.4892648490453',<br />
"description": '17:04'<br />
}<br />
,<br />
{<br />
"title": '17:07',<br />
"lat": '-20.1761991610139',<br />
"lng": '57.4822988090064',<br />
"description": '17:07'<br />
}<br />
,<br />
{<br />
"title": '17:10',<br />
"lat": '-20.1961753165077',<br />
"lng": '57.4824656045157',<br />
"description": '17:10'<br />
}<br />
,<br />
{<br />
"title": '17:13',<br />
"lat": '-20.220309405427',<br />
"lng": '57.487469732469',<br />
"description": '17:13'<br />
}<br />
,<br />
{<br />
"title": '17:16',<br />
"lat": '-20.2342861943874',<br />
"lng": '57.4996038055266',<br />
"description": '17:16'<br />
}<br />
, <br />
{<br />
"title": '17:19',<br />
"lat": '-20.2419951166671',<br />
"lng": '57.4924547310887',<br />
"description": '17:19'<br />
}<br />
,<br />
{<br />
"title": '17:22',<br />
"lat": '-20.2418197976697',<br />
"lng": '57.4838445649936',<br />
"description": '17:22'<br />
}<br />
,<br />
{<br />
"title": '17:25',<br />
"lat": '-20.2417927882899',<br />
"lng": '57.4821667460937',<br />
"description": '17:25'<br />
}<br />
,<br />
{<br />
"title": '17:28',<br />
"lat": '-20.244868944177',<br />
"lng": '57.4761929726994',<br />
"description": '17:28'<br />
}<br />
, <br />
{<br />
"title": '17:31',<br />
"lat": '-20.2494147017248',<br />
"lng": '57.4751336596163',<br />
"description": '17:31'<br />
}<br />
,<br />
{<br />
"title": '17:34',<br />
"lat": '-20.2529453707358',<br />
"lng": '57.4698643969492',<br />
"description": '17:34'<br />
}<br />
,<br />
{<br />
"title": '17:37',<br />
"lat": '-20.2515653985995',<br />
"lng": '57.4694827601669',<br />
"description": '17:37'<br />
}<br />
];<br />
<br />
window.onload = function () {<br />
var mapOptions = {<br />
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),<br />
zoom: 10,<br />
mapTypeId: google.maps.MapTypeId.ROADMAP<br />
};<br />
<br />
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);<br />
var infoWindow = new google.maps.InfoWindow();<br />
var lat_lng = new Array();<br />
var latlngbounds = new google.maps.LatLngBounds();<br />
<br />
for (i = 0; i < markers.length; i++) {<br />
var data = markers[i]<br />
var myLatlng = new google.maps.LatLng(data.lat, data.lng);<br />
<br />
lat_lng.push(myLatlng);<br />
<br />
var marker = new google.maps.Marker({<br />
position: myLatlng,<br />
map: map,<br />
title: data.title<br />
});<br />
latlngbounds.extend(marker.position);<br />
(function (marker, data) {<br />
google.maps.event.addListener(marker, "click", function (e) {<br />
infoWindow.setContent(data.description);<br />
infoWindow.open(map, marker);<br />
});<br />
})(marker, data);<br />
}<br />
<br />
map.setCenter(latlngbounds.getCenter());<br />
map.fitBounds(latlngbounds);<br />
<br />
//***********ROUTING****************//<br />
<br />
//Initialize the Path Array<br />
var path = new google.maps.MVCArray();<br />
<br />
//Initialize the Direction Service<br />
var service = new google.maps.DirectionsService();<br />
<br />
//Set the Path Stroke Color<br />
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });<br />
<br />
//Loop and Draw Path Route between the Points on MAP<br />
for (var i = 0; i < lat_lng.length; i++) {<br />
if ((i + 1) < lat_lng.length) {<br />
var src = lat_lng[i];<br />
var des = lat_lng[i + 1];<br />
<br />
path.push(src);<br />
poly.setPath(path);<br />
<br />
service.route({<br />
origin: src,<br />
destination: des,<br />
travelMode: google.maps.DirectionsTravelMode.DRIVING<br />
}, function (result, status) {<br />
if (status == google.maps.DirectionsStatus.OK) {<br />
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {<br />
path.push(result.routes[0].overview_path[i]);<br />
}<br />
}<br />
});<br />
}<br />
}<br />
} 解决方案
Check this out: HTML5 Geolocation[^]
这篇关于使用javascript在地图上显示位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
