javascript 从 .gpx 文件导入坐标并使用 Google Maps API 显示的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15829048/
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
Best way to import coordinates from .gpx file and display using Google Maps API
提问by Brendan Vogt
I am a mountain biker and I track my rides on my Samsung S3 Galaxyusing programs such as Endomondoand Strava. Everything regarding my ride is saved on these 2 websites.
我是一名山地自行车手，我Samsung S3 Galaxy使用Endomondo和等程序跟踪我的骑行情况Strava。关于我的骑行的所有信息都保存在这两个网站上。
I have my own personal website where I display mountain routes in various areas where I stay. The route data recorded via GPSusing Endomondo and Strava I have exported to a .gpxfile. I need this data in the .gpx file to display on my own personal website. So I started to look for a solution using the Google Maps APIand importing the .gpx file without using an external tool.
我有自己的个人网站，我可以在其中展示我住过的各个地区的山路。通过GPS使用 Endomondo 和 Strava记录的路线数据我已导出到.gpx文件中。我需要 .gpx 文件中的这些数据显示在我自己的个人网站上。所以我开始寻找使用Google Maps API.gpx 文件而不使用外部工具导入的解决方案。
I struggled to find an answer. I came across this post where the guy uses jQueryto extract the data in the XML file and to display this data on his Google map:
http://www.jacquet80.eu/blog/post/2011/02/Display-GPX-tracks-using-Google-Maps-API
我努力寻找答案。我看到了这篇文章，他jQuery用来提取 XML 文件中的数据并在他的谷歌地图上显示这些数据：http:
//www.jacquet80.eu/blog/post/2011/02/Display-GPX-tracks -using-Google-Maps-API
This is how implemented it into my HTML markup:
这是在我的 HTML 标记中实现它的方式：
<script>
function initialize() {
var route1Latlng = new google.maps.LatLng(-33.7610590,18.9616790);
var mapOptions = {
center: route1Latlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.ajax({
type: "GET",
url: "gpx/my_route.gpx",
dataType: "xml",
success: function (xml) {
var points = [];
var bounds = new google.maps.LatLngBounds();
$(xml).find("trkpt").each(function () {
var lat = $(this).attr("lat");
var lon = $(this).attr("lon");
var p = new google.maps.LatLng(lat, lon);
points.push(p);
bounds.extend(p);
});
var poly = new google.maps.Polyline({
// use your own style here
path: points,
strokeColor: "#FF00AA",
strokeOpacity: .7,
strokeWeight: 4
});
poly.setMap(map);
// fit bounds to track
map.fitBounds(bounds);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
It works. But is this the correct way to do it? Is there a better a way to implement this?
有用。但这是正确的做法吗？有没有更好的方法来实现这一点？
回答by Mr.Pohoda
If you use PostgreSQL database, I'd suggest you to use PostGISand import your records to the database. Then you can easily generate kml files (ST_asKml) and display them on Google Map. If your gpx is huge, you can use ST_Simplifyon a database query so that the page is loaded faster and you still have full detailed route in your database.
如果您使用 PostgreSQL 数据库，我建议您使用PostGIS并将您的记录导入数据库。然后，您可以轻松生成 kml 文件 ( ST_asKml) 并将其显示在 Google 地图上。如果您的 gpx 很大，您可以在数据库查询上使用ST_Simplify，以便更快地加载页面，并且您的数据库中仍然有完整的详细路线。
You also have a lot of possibilities:
你也有很多可能性：
- search for rides in a specified area
- measure total distance in a month
- and much more
- 搜索指定区域的游乐设施
- 测量一个月内的总距离
- 以及更多
