Question

我尝试在谷歌地图上显示当前位置附近的标记。如果拖动地图，它将更新中心坐标并重新计算该中心周围的标记。当前用户位置周围的初始标记正确显示，但是当我拖动地图时，它们始终保持相同。更新和POST都发生了（我的猜测是在标记重新加载之前POST没有完成，所以旧的保留）。环绕标记存储在会话变量中。

Controller showNearbyUsers方法：

/**
 * Shows the users near the current one
 *
 * @return void
 */
public static function showNearbyUsers($centerlat,$centerlng)
{
    try {
        // Delete the session variable
        if (Session::has('nearbies'))
        {
            Session::forget('nearbies');
        }

        // Define max, min for lat and lng
        $centerlatlow = $centerlat-0.25;
        $centerlathigh = $centerlat+0.25;
        $centerlnglow = $centerlng-0.25;
        $centerlnghigh = $centerlng+0.25;

        $nearbies = DB::table('positions')->join('users', 'users.id', '=', 'positions.users_id')
                                          ->where('users_id', '!=', Auth::id())
                                          ->whereBetween('lat', array($centerlatlow, $centerlathigh))
                                          ->whereBetween('lng', array($centerlnglow, $centerlnghigh))
                                          ->select('positions.*', 'users.name', 'users.level')
                                          ->get();

        if ($nearbies) {
            return Session::put('nearbies', $nearbies);
        }
    } catch(\Exception $e) {
        Session::flash('message', 'An error occured with your localization. Enable GPS and refresh.');
        Session::flash('alert-class', 'alert-danger');
    }
}

查看脚本

<script>
// Auto adjust map div
$(window).resize(function () {
    var h = $(window).height(),
    offsetTop = 220; // Calculate the top offset
    $('#map_canvas').css('height', (h - offsetTop));
}).resize();

// Setup token security
$.ajaxSetup({
   headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});

// Attributes
var map;
var geocoder;
var markers = Array();      // Contains x,y
var users = Array();        // Contains whole user info
var current = Array();
var infoWindows = Array();
var mapCenter;

// Test initialize users array
//users = [['Brugg',47.47963,8.18465],['Aarau',47.39340,8.04312],['Baden',47.47377,8.30647]];

// Initialize the map with logged in user
function initialize() {
    geocoder = new google.maps.Geocoder();
    getLocation();
}

// Set nearby user markers
function setMarkers(list) {
    for(var i=0; i<list[0].length; i++){
        var element = (list[0])[i];
        var nearbyLatLng = new google.maps.LatLng(element['lat'], element['lng']);
        console.log((list[0])[i]);
        markers[i] = new google.maps.Marker({
            position: nearbyLatLng,
            map: map,
            title: element['name'],
            infoWindowIndex : i
        });

        infoWindows[i] = new google.maps.InfoWindow({
            content : element['name']
        });

        google.maps.event.addListener(markers[i], 'click',
            function(event)
            {
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );
    }
}

// Delete nearby user markers
function deleteMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
}

// Map dragging listener. Updates the nearby users markers
function mapDragListener() {
    google.maps.event.addListener(map, 'dragend', function() {
        deleteMarkers();
        mapCenter = map.getCenter();
        $.ajax({
            type: "POST",
            url: "updatenearbies/"+mapCenter.lat()+"/"+mapCenter.lng(),
            async: false
        });
        @if(Session::has('nearbies'))
            <?php $test = Session::get('nearbies'); ?>
            users = [<?php echo json_encode($test); ?>];
            console.log(users);
        @endif
        setMarkers(users);
    });
}

// Map zoom listener. Updates the nearby users markers
function mapZoomListener() {

}

// Get current user location
function getLocation() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
    } else {
        alert("Geolocation is not supported by this browser.");
    }
}

// If success in finding current position
function geoSuccess(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    // Send to geocoordinates.php and save to DB
    $.post("updateme/"+lat+"/"+lng);
    mainMapCalc(lat, lng);
}

// If no success in finding current position
function geoError() {
    alert("Please enable Geo-Location and Refresh the Website.");
}

// Set the logged in users and build up the environment
function mainMapCalc(lat, lng) {
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
        if(status == google.maps.GeocoderStatus.OK) {
            if(results[1]) {
                //formatted address
                var address = results[0].formatted_address;
                geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var myOptions = {
                        zoom: 18,
                        center: results[0].geometry.location,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    mapCenter = map.getCenter();
                    $.ajax({
                        type: "POST",
                        url: "updatenearbies/"+mapCenter.lat()+"/"+mapCenter.lng(),
                        async: false
                    });
                    <?php $test = Session::get('nearbies'); ?>
                    users = [<?php echo json_encode($test); ?>];
                    setMarkers(users);      // Set initial nearby markers
                    mapDragListener();      // Register Listener
                    //mapZoomListener();      // TODO: Register Listener
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
                });
            } else {
                alert("Geocoder Error// No results found");
            }
        } else {
            alert("Geocoder Error// Failed due to: " + status);
        }
    });
}

// Show Map
google.maps.event.addDomListener(window, 'load', initialize);
</script>

这里的问题在哪里？

提前致谢

Answer 1

看起来问题是你发出了ajax请求，但是你没有对返回的数据做任何事情。尝试更改

$.ajax({
    type: "POST",
    url: "updatenearbies/"+mapCenter.lat()+"/"+mapCenter.lng(),
    async: false
});

到

$.ajax({
    type: "POST",
    url: "updatenearbies/"+mapCenter.lat()+"/"+mapCenter.lng(),
    success: function(data, textStatus, jqXHR) {
        // request succeeded
        // data - response from server
    },
    error: function (jqXHR, textStatus, errorThrown){
        // the request failed
    }
});

另请注意，async: false已被弃用：https://api.jquery.com/jQuery.ajax/#options，因此您应该使用如上所示的回调。

Laravel和地理编码标记（附近用户）无法正确更新

1 个答案: