我想制作一个文件,我可以在其中显示我的GPS轨迹并设置我拍摄照片的标记。 我制作了2个脚本:一个显示我的GPS轨迹,一个显示我的标记。
如何将它合并在一起,以便我可以同时显示GPS轨迹和标记?
我的追踪:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps GPX Test - async</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<!-- Make the document body take up the full screen -->
<style type="text/css">
html, body {width: 100%; height: 100%}
body {margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="loadgpx.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function loadGPXFileIntoGoogleMap(map, filename) {
$.ajax({url: filename,
dataType: "xml",
success: function(data) {
var parser = new GPXParser(data, map);
parser.setTrackColour("#ff0000"); // Set the track line colour
parser.setTrackWidth(3); // Set the track line width
parser.setMinTrackPointDelta(0.001); // Set the minimum distance between track points
parser.centerAndZoom(data);
parser.addTrackpointsToMap(); // Add the trackpoints
parser.addWaypointsToMap(); // Add the waypoints
}
});
}
$(document).ready(function() {
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
tur = "halsnas030610.xml";
loadGPXFileIntoGoogleMap(map, tur);
});
//]]>
</script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
</body>
</html>
我的标记:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 1000px; height: 1000px;"></div>
<script type="text/javascript">
var locations = [
['P1030728.jpg', 55.96160, 11.85141],
['P1070731.jpg', 55.97566, 11.85472],
['P1030743.jpg', 55.9475, 11.85306],
['P1030735.jpg', 55.97917, 11.85844],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(55.9475, 11.85306),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
答案 0 :(得分:0)
你错过了这一行:google.maps.event.addDomListener(window,'load',load)。 它现在有效吗? 告诉我们如何。