我能够在Google地图上显示我在KML图层上绘制的线索,但我想在按下按钮时向用户显示他们在路径上的位置。以下是我展示KML图层的内容。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvtEfhi11SeoL1Osfo8St53JRkasYnTRw&sensor=true">
</script>
<link rel="stylesheet" type="text/css" href="../../css/bbt.css"/>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.183244, -115.585399),
zoom: 15,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var kmlUrl = 'http://www.sites.google.com/site/skyrokml/kml/FenlandTrail.kml';
var kmlOptions = {
suppressInfoWindows: false,
preserveViewport: true,
map: map
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
contentString = "Here you are!";
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open(map);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
} else if (google.gears) {
// Try Google Gears Geolocation
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
contentString = "";
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open(map);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
} else {
// Browser doesn't support Geolocation
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
initialLocation = newyork;
contentString = "Error: The Geolocation service failed.";
} else {
initialLocation = siberia;
contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
}
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open(map);
}
</script>
</head>
<body onload="initialize()">
<div data-role="page">
<div data-role="none">
<div id="map-canvas"></div>
</div>
<ul id="menu" class="blue">
<li><a href="../../bbteasy/bbteasyfenlandloop.html" rel="external">Back</a></li>
<li><a href="../../index.html">Home</a></li>
</ul>
</div>
</body>