Google maps 如何在已加载KML层的动态谷歌地图上使用按钮激活地理定位？_Google Maps_Jquery Mobile_Button_Geolocation_Cordova

Google maps 如何在已加载KML层的动态谷歌地图上使用按钮激活地理定位？

google-maps jquery-mobile button geolocation cordova

Google maps 如何在已加载KML层的动态谷歌地图上使用按钮激活地理定位？,google-maps,jquery-mobile,button,geolocation,cordova,Google Maps,Jquery Mobile,Button,Geolocation,Cordova,我有一个路径地图（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

我有一个路径地图（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>


芬兰地图
html{高度：100%}
正文{高度：100%；边距：0；填充：0}
$（document）.bind（“mobileinit”，function（）{
$.mobile.allowCrossDomainPages=true；
});
函数初始化（）{
var latlng=新的google.maps.latlng（51.183244，-115.585399）；
变量myOptions={
缩放：15，
街景控制：错误，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.HYBRID
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
var Kmlur='1〕http://www.sites.google.com/site/skyrokml/kml/FenlandTrail.kml';
var kmlOptions={
suppressInfoWindows:false，
对,，
地图：地图
};
var kmlLayer=新的google.maps.kmlLayer（kmlUrl，kmlOptions）；
}
找到我！

解决方案：例子


芬兰地图
html{高度：100%}
正文{高度：100%；边距：0；填充：0；}
.ui内容{填充：0！重要；}
$（document）.bind（“mobileinit”，function（）{
$.mobile.allowCrossDomainPages=true；
});
var映射；
$（document）.on（'pageshow'，'#fenlandmap'，function（）{
$（文档）。在（'单击'，'#“btnInit”'上，函数（）{
getCurrentPosition（onMapSuccess，onMapFailure，{'EnableHighAccurance'：true，'timeout'：20000}）；
});
var latlng=新的google.maps.latlng（51.183244，-115.585399）；
变量myOptions={
缩放：15，
街景控制：错误，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.HYBRID
};
map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
var Kmlur='1〕http://www.sites.google.com/site/skyrokml/kml/FenlandTrail.kml';
var kmlOptions={
suppressInfoWindows:false，
对,，
地图：地图
};
var kmlLayer=新的google.maps.kmlLayer（kmlUrl，kmlOptions）；
});
函数onMapSuccess（pos）{
map.setCenter（新的google.maps.LatLng（pos.coords.lation，pos.coords.longitude））；
}
函数onMapFailure（）{
警报（“错误”）；
}           
找到我！

我无法告诉你你有多棒！

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>