我的 googlemap 地理位置不起作用
Posted
技术标签:
【中文标题】我的 googlemap 地理位置不起作用【英文标题】：my geolocation for googlemap is not working 【发布时间】：2014-05-16 12:36:43 【问题描述】：我正在尝试使用 jQuery mobile 和 phonegap 开发一个混合应用程序，我想实现一个支持地理定位的 googlemap。为此我已经完成了一些编码，但是在运行应用程序时它只是给了我一个 ajax 加载程序，它是没有停止，任何人都可以帮助我找到错误.. 我尝试了一些 jQuery 移动演示，但没有一个能正常工作。在下面给出我的代码
<!doctype html>
<html lang="en">
<head>
<title> Google maps </title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<style>
#content
padding: 0;
position : absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
</style>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=true&language=en"> </script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript">
var mumbai = new google.maps.LatLng(19.075984,72.877656),
mobileDemo = 'center': '19.075984,72.877656', 'zoom': 15 ,
cityList = [
['Bank ATM CST Road', 19.075984,72.877656, 1],
['Bank ATM Air India Road', 19.078318,72.877024, 2],
['Bank ATM Lal Bahadur Sasthri Road', 19.069236,72.875278, 3]
];
function initialize()
$('#map_canvas').gmap( 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false );
//addMarkers();
getcurrentposition();
function addMarkers()
for (var i = 0; i < cityList.length; i++)
var $marker = $('#map_canvas').gmap('addMarker', id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2],cityList[i][3]),title: cityList[i][0]);
$marker.click(function()
$('#map_canvas').gmap('openInfoWindow', 'content': cityList[this.id][0], this);
);
$(document).on("pageinit", "#basic-map", function()
initialize();
);
/* $(document).on('click', '.add-markers', function(e)
e.preventDefault();
addMarkers();
); */
function getcurrentposition()
$('#map_canvas').gmap('getCurrentPosition', function(position, status)
if ( status === 'OK' )
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$('#map_canvas').gmap('addMarker', 'position': clientPosition, 'bounds': true);
$('#map_canvas').gmap('addShape', 'Circle',
'strokeWeight': 0,
'fillColor': "#008595",
'fillOpacity': 0.25,
'center': clientPosition,
'radius': 15,
'clickable': false
);
);
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" >
<div id="map_canvas" style="height:500px"></div>
</div>
</div>
</div>
</body>
</html>
Logcat
04-04 04:53:07.952: D/CordovaLog(1665): Uncaught TypeError: Cannot call method 'apply' of undefined
04-04 04:53:07.952: I/chromium(1665): [INFO:CONSOLE(1)] "Uncaught TypeError: Cannot call method 'apply' of undefined", source: file:///android_asset/www/my_current_location.html (1)
04-04 04:53:08.182: D/Cordova(1665): onPageFinished(file:///android_asset/www/my_current_location.html)
04-04 04:53:08.182: D/Cordova(1665): Trying to fire onNativeReady
04-04 04:53:08.202: D/DroidGap(1665): onMessage(onNativeReady,null)
04-04 04:53:08.202: D/DroidGap(1665): onMessage(onPageFinished,file:///android_asset/www/my_current_location.html)
【问题讨论】：
你检查过javascript控制台吗？有什么错误吗？ 我检查了我的 logcat ...我正在 Eclipse 中开发 ..查看编辑 该消息Uncaught TypeError: Cannot call method 'apply' of undefined 在您的函数getcurrentposition() 启动后发送。所以莫勒博士是对的。
我已经在 js 中添加了那个方法 ..现在未捕获的类型错误已经消失，但没有什么可以显示
添加这个js文件
【参考方案1】：
jquery.ui.map 没有方法 getCurrentPosition ，你必须自己实现它。
请参阅http://code.google.com/p/jquery-ui-map/wiki/Examples#Example_get_user_position 了解示例
链接的例子好像错了，至少jquery.ui.map这个版本是错的
用途：
( function($)
$.extend($.ui.gmap.prototype,
/**
* Gets the current position
* @a: function(status, position)
* @b:object, see https://developer.mozilla.org/en/XPCOM_Interface_Reference/nsIDOMGeoPositionOptions
*/
getCurrentPosition: function(callback, geoPositionOptions)
if ( navigator.geolocation )
navigator.geolocation.getCurrentPosition (
function(result)
callback(result, 'OK');
,
function(error)
callback(null, error);
,
geoPositionOptions
);
else
callback(null, 'NOT_SUPPORTED');
);
(jQuery) );
但您也可以按照 Ved 的建议加载现有的 jquery.ui.map.extensions.js
另外：
您还必须包含 http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.overlays.js ，这将实现 addShape-方法
演示：http://jsfiddle.net/doktormolle/rd4Xt/
【讨论】：
我已经尝试了链接中的代码..我已经创建了方法 jquery.ui.map.extensions.js 和 jquery.ui.map.extensions.min.js..但是现在没有 ajax加载器，没有可显示的内容【参考方案2】：也添加这个 javascript 文件..
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
【讨论】：
我已经添加了..但是什么也没发生。 什么都没发生？ 我正在我的设备 Nexus 7 选项卡中尝试..我正在获取其他地图视图，问题在于地理位置..当我添加地理定位代码时，我只是得到一个框架 它现在正在工作 ..感谢 Ved 的帮助 ..祝你有美好的一天 :)以上是关于我的 googlemap 地理位置不起作用的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Swift 中使用 googleMaps 更新我的位置自定义标记