Javascript 我对谷歌地图的地理定位不起作用_Javascript_Jquery_Google Maps_Jquery Mobile_Cordova

Javascript 我对谷歌地图的地理定位不起作用

javascript jquery google-maps jquery-mobile cordova

Javascript 我对谷歌地图的地理定位不起作用,javascript,jquery,google-maps,jquery-mobile,cordova,Javascript,Jquery,Google Maps,Jquery Mobile,Cordova,我正在尝试使用jQuery mobile和phonegap开发一个混合应用程序，我想实现一个支持地理定位的googlemap。为此，我做了一些编码，但在运行应用程序时，它只是给了我一个ajax加载程序，它没有停止，有人能帮我找到错误吗。。我试过一些jQuery手机演示，但没有一个能正常工作。在下面给出我的代码 <!doctype html> <html lang="en"> <head> <title> Google maps

我正在尝试使用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>

jquery.ui.map

没有方法

getCurrentPosition

，您必须自己实现它

请参阅以获取示例

链接的示例似乎是错误的，至少这个版本的jquery.ui.map是错误的

使用：

但您也可以按照Ved的建议加载现有的

jquery.ui.map.extensions.js

另外： 您还必须包括，这将实现

addShape

-方法

演示：

也添加此javascript文件

<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>

您是否检查了javascript控制台？有错误吗？我已经检查了我的日志…我正在Eclipse中开发..请参阅编辑器，其中消息

uncaughttypeerror:cannotcall'apply'of undefined

在函数

getcurrentposition（）

启动后出现。所以Molle博士是对的。我在js中添加了该方法。.现在，未捕获类型错误消失了，但没有显示添加此js文件我尝试了链接中的代码。.我创建了方法jquery.ui.map.extensions.js和jquery.ui.map.extensions.min.js。.但是现在没有ajax加载程序，也没有显示任何内容。.但是什么都没有发生。什么什么也没发生？我正在尝试我的设备Nexus 7选项卡。我正在获取其他地图视图。问题在于地理位置。当我添加地理位置代码时，我刚刚获得一个框架。它现在正在工作。感谢您的帮助。祝您愉快：）

( 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) );

<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>