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