我的谷歌地图的地理位置不起作用
my geolocation for googlemap is not working
我正在尝试使用jQuery mobile和phonegap开发一个混合应用程序,我想实现一个支持地理位置的谷歌地图,因为我做了一些编码,但在运行应用程序时,它只是给了我一个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>
日志猫
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)
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/
也添加这个javascript文件。
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
相关文章:
- 使用绝对位置时,jQuery向左滚动不起作用
- 表单提交前客户端地理编码的实现;不起作用
- JS窗口.位置不起作用
- 铬移动;导航.地理位置不起作用
- 当我将位置更改为绝对时,画布精灵表和触摸事件不起作用
- 谷歌地理编码不起作用
- JQuery Mobile单击事件不起作用,具体取决于HTML中的元素位置
- Rails-jQuery地理编码和Places自动完成插件不起作用
- Sencha触摸地理位置在设备上(iPhone 5)上2-3次后获取当前位置不起作用
- 地理位置脚本不起作用
- 我的地理位置(javascript)不起作用,我不知道为什么
- 地理位置在 Phonegap 中不起作用
- 将标记放在OpenLayers中的地理位置 - 不起作用
- 地理位置在iPhone上不起作用
- 地理位置在火狐中不起作用
- 地理位置发现我的位置不起作用
- 导航器地理位置获取当前位置不起作用
- 即使设置了所有选项,HTML5地理位置也不起作用
- Javascript 谷歌地理位置在实时站点中不起作用
- 我的谷歌地图的地理位置不起作用