将地理位置用户存储在数据库中

时间:2017-11-03 14:11:28

标签: php ajax html5 geolocation

我正在努力解决我在这里找到的类似于我的问题的代码有什么问题。直到现在我还没有成功。

以下是代码:

        if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(function(position) {
            function successFunction(position) {
                $.ajax({
                        type: 'POST',
                        data: {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                                },
                        url: 'template-userslocation.php'
                    });
                }
            });
        }

这里是'template-userslocation.php'中的代码:

    <?php
    /**
     * Template Name: template-userslocation
    */

        echo $lat = $_POST['lat'];
        echo $lng = $_POST['lng'];


    ?>

这是我加载页面时得到的内容:

  

注意:未定义的索引:在第8行上的... / template-userslocation.php

     

注意:第9行的未定义索引:lng in ... / template-userslocation.php

在此之前有代码可能会使它无效。 注意:我已经在看到第一个代码中没有错误并且在得到你们的帮助之后添加了这个。

以前的代码:

    if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                            var pos = {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            };

                            infoWindow.setPosition(pos);
                            infoWindow.setContent('You are here');
                            map.setCenter(pos);
                     },

                function() {
                            handleLocationError(true, infoWindow, map.getCenter());
                    }); 

    } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
            };  

我认为var pos = {lat: position.coords.latitude, lng: position.coords.longitude};是我遇到的问题之一。

注意:这里所有代码:

<div class="map">
    <div id="map"></div><!-- #map -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAp9iQ2oC3PEvy20_6aDpAPGLT8sFDqAjI&libraries=geometry,places&signed_in=true"></script>     
    <script type="text/javascript">
        google.maps.event.addDomListener( window, 'load', gmaps_results_initialize );

        function gmaps_results_initialize() {
            map = new google.maps.Map( document.getElementById( 'map' ), {
                zoom:           3,
                center:         new google.maps.LatLng( 28.291564, 16.62913 ),
                mapTypeControl: true,

                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.RIGHT_BOTTOM
                },
                zoomControl: true,
                zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
                },

                scaleControl: true,
                streetViewControl: true,
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.LEFT_BOTTOM
                },
                fullscreenControl: true,
                fullscreenControlOptions: {
                position: google.maps.ControlPosition.LEFT_BOTTOM
                }
            });

            var infoWindow = new google.maps.InfoWindow({map: map});

            <?php  if (is_user_logged_in() ) { ?>

                       // Try HTML5 geolocation.

                       if (navigator.geolocation) {                         
                           navigator.geolocation.getCurrentPosition(function (position) {
                               var pos = {
                                  lat: position.coords.latitude,
                                  lng: position.coords.longitude
                               };

                               infoWindow.setPosition(pos);
                               infoWindow.setContent('You are here');
                               map.setCenter(pos);
                           },


                           function() {
                               handleLocationError(true, infoWindow, map.getCenter());
                           }); 


                     } else {
                            // Browser doesn't support Geolocation
                            handleLocationError(false, infoWindow, map.getCenter());
                     };  

                     if (navigator.geolocation) {

                           navigator.geolocation.getCurrentPosition(function (position) {
                               var coords = position.coords;
                               $.ajax({
                                   type: 'POST',
                                   data: {
                                       lat: coords.latitude,
                                       lng: coords.longitude
                                   },
                                   url: 'template-userslocation.php'
                               });

                           });
                    }

        <?php } else; ?>                
        } 

    </script>
</div>

我做错了什么?在我发现的其他类似的问题中,他们也根本没有解决它。

解决:

问题在于它是在Wordpress中制作的,Wordpress有自己的方式来处理AJAX。

Here the info

3 个答案:

答案 0 :(得分:0)

我相信你的网址有误,请看:

url: 'template-users-location.php'

用户之后有一个' - '。但你说你的文件名是template-userslocation.php

答案 1 :(得分:0)

删除ajax请求中数据对象成员周围的单引号:

$.ajax({
      type: 'POST',
      data: {
         lat: position.coords.latitude,
         lng: position.coords.longitude
      },
      url: 'template-userslocation.php'
});

答案 2 :(得分:0)

在您的示例中,function successFunction(position) {永远不会被调用。 但是,经过小的修改后,这就是它的工作方式,并在POST中传递正确的变量。

if (navigator.geolocation) {

  navigator.geolocation.getCurrentPosition(function(position) {
    var coords = position.coords;
    $.ajax({
      type: 'POST',
      data: {
        lat: coords.latitude,
        lng: coords.longitude
      },
      url: 'template-userslocation.php'
    });

  });

}

希望有所帮助。