如何使用动态Google地图上已加载了KML图层的按钮来激活地理位置？

Question

我有一个路线图（KML层），它在路线上加载并居中。 在地图的底部，我有一个按钮，上面写着“找到我！”。 如何连接该按钮以找到用户的位置？ 我正在使用JQM和Phonegap。

 <head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height, user-scalable=no, target-densitydpi=device-dpi"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

        <title>Fenland Map</title>

        <link rel="stylesheet" href="../../css/jquery.mobile.css" />
        <link rel="stylesheet" href="../../css/bbt.css"/>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            </style>
        <script src="js/bbt.js"></script>
        <script type="text/javascript" src="../../js/cordova-2.5.0.js"></script>
        <script type="text/javascript" src="../../js/jquery.js"></script>
        <script type="text/javascript">
            $( document ).bind( "mobileinit", function() {
                               $.mobile.allowCrossDomainPages = true;
                               });
            </script>

        <script type="text/javascript" src="../../js/jquery.mobile.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(51.183244, -115.585399);
                var myOptions = {
                    zoom: 15,
                    streetViewControl: false,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                                              myOptions);
                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);
            }

        </script>

</head> 
<body onload="initialize();"> 
    <div data-role="page" style="width:100%;height:100%;" id="fenlandmap">

        <div data-role="content" style="width:100%;height:100%;"> 
            <div id="map_canvas" style="width:100%; height:420px"></div> 
        </div><!-- /content -->
        <div data-role="footer" data-position="fixed" id="footer">
            <a href="../bbteasyfenlandloop.html" data-role="button" data-direction="reverse"
                data-transition="slide"
                 data-icon="arrow-l">Back</a>
            <a href="../../index.html" data-role="button"
                data-transition="turn" data-direction="reverse" data-icon="home">Home</a>
            <button id=”btnInit” data-icon="star">Find me!</button>
        </div>

    </div><!-- /page -->

</body>

Answer 1

解决方案：

var map;

$(document).on('pageshow', '#fenlandmap', function(){ 

    $(document).on('click', '#”btnInit”', function(){           
        navigator.geolocation.getCurrentPosition(onMapSuccess, onMapFailure,{'enableHighAccuracy':true,'timeout':20000});
    });

    var latlng = new google.maps.LatLng(51.183244, -115.585399);
    var myOptions = {
        zoom: 15,
        streetViewControl: false,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);
    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);
});

function onMapSuccess(pos) {
    map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}

function onMapFailure() {
    alert('Error');
}           

例

 <head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height, user-scalable=no, target-densitydpi=device-dpi"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

        <title>Fenland Map</title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0; }
            .ui-content { padding: 0 !important; }
            </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            $( document ).bind( "mobileinit", function() {
                $.mobile.allowCrossDomainPages = true;
            });
        </script>

        <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript">

            var map;

            $(document).on('pageshow', '#fenlandmap', function(){ 

                $(document).on('click', '#”btnInit”', function(){           
                    navigator.geolocation.getCurrentPosition(onMapSuccess, onMapFailure,{'enableHighAccuracy':true,'timeout':20000});
                });

                var latlng = new google.maps.LatLng(51.183244, -115.585399);
                var myOptions = {
                    zoom: 15,
                    streetViewControl: false,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                };
                map = new google.maps.Map(document.getElementById("map_canvas"),
                                              myOptions);
                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);
            });

            function onMapSuccess(pos) {
                map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            }

            function onMapFailure() {
                alert('Error');
            }           

        </script>

</head> 
<body> 
    <div data-role="page" style="width:100%;height:100%;" id="fenlandmap">

        <div data-role="content" style="width:100%;height:100%;" id="map_content"> 
            <div id="map_canvas" style="width:100%; height:420px"></div> 
        </div><!-- /content -->
        <div data-role="footer" data-position="fixed" id="footer">
            <a href="../bbteasyfenlandloop.html" data-role="button" data-direction="reverse"
                data-transition="slide"
                 data-icon="arrow-l">Back</a>
            <a href="../../index.html" data-role="button"
                data-transition="turn" data-direction="reverse" data-icon="home">Home</a>
            <button id=”btnInit” data-icon="star">Find me!</button>
        </div>

    </div><!-- /page -->

</body>