0

我可以在 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>

4

0 回答 0