如何使用已加载 KML 图层的动态 Google 地图上的按钮激活地理定位？
Posted
技术标签:
【中文标题】如何使用已加载 KML 图层的动态 Google 地图上的按钮激活地理定位？【英文标题】：How to activate geolocation with a button on a dynamic Google map that has already been loaded with a KML layer? 【发布时间】：2013-05-29 06:19:10 【问题描述】：我有一个路径图（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>
【问题讨论】：
【参考方案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>
【讨论】：
我无法告诉你你有多棒！以上是关于如何使用已加载 KML 图层的动态 Google 地图上的按钮激活地理定位？的主要内容，如果未能解决你的问题，请参考以下文章