使用 HTML、AJAX 和 JS 在同一地图上获取当前用户位置和其他用户标记答案

【问题标题】：Get current user location and other users markers on same map using HTML, AJAX and JS使用 HTML、AJAX 和 JS 在同一地图上获取当前用户位置和其他用户标记
【发布时间】：2017-07-07 02:02:14
【问题描述】：

我试图在一个地图用户的当前位置和其他用户标记上显示我从 ajax 帖子获得的位置。

换句话说，我正在尝试将其结合起来 https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

有了这个 http://en.marnoto.com/2013/12/mapa-com-varios-marcadores-google-maps.html

甚至更简单的版本 Google Maps JS API v3 - Simple Multiple Marker Example

但我不知道如何实现从 ajax 获得的数据。为了从 ajax 获取信息，我必须传递纬度和经度，以便我可以获取半径 1 公里内且在过去 5 分钟内登录的用户。我已经编写了查询，我的 api 是正确的，我已经检查了那部分，但我不知道如何结合这两个代码来获得一张带有用户当前位置和其他用户标记的地图。

这是我的 index.html 文件

 <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geolocation</title>
    <script src="location.js"></script>
</head><body>

    <div id="map"></div>
    <p id="geolocation"></p>
    <script>

        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 45.38361, lng: 20.38194},
                zoomControl:true,
                zoom: 15
            });
            var infoWindow = new google.maps.InfoWindow({map: map});

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

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                    'Error: The Geolocation service failed.' :
                    'Error: Your browser doesn\'t support geolocation.');
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap">
    </script>
</body>

这是我的 location.js 文件

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
    var element = document.getElementById('geolocation');
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);

//here is where I write in the db user's current location
    $.post("url/location", {username: localStorage.getItem("username"), latitude: position.coords.latitude, longitude: position.coords.longitude});

//here is where I get other users locations based on user's current one and in the radius of 1km 
    $.post("url/getUsers", {latitude: position.coords.latitude, longitude: position.coords.longitude})
            .done(function (data) {
                $(data).each(function (index, value) {
//here I am writing in the console the data that I receive back from the ajax call, and I presume that I should make my markers here
                    console.log(value.username + ' ' + value.latitude + ' ' + value.longitude);
                });
            });
}
function onError(error) {
    alert('code: ' + error.code + '\n' +
            'message: ' + error.message + '\n');
}

【问题讨论】：

数据库中有经纬度吗？？
是的，我正在获取当前用户位置的纬度和经度，并使用 post 和 ajax 将其放入数据库中。我的下一步是让另一个 api 发布相同的纬度和经度，以获取其他用户在半径 1 公里和最后 5 分钟内的位置，以便该位置是最新的。我已经在 console.log 中写了结果，它可以工作，我得到了正确的数据。我只是无法弄清楚如何在地图上放置这些标记。
好的，我会在几分钟内指导你。我已经实施了。谢谢。
非常感谢！我已经为此工作了三天，但没有成功:(
您要在地图上添加一个标记吗？另外，你能把你从 DB 得到的纬度和经度的数组发给我吗？谢谢。

标签： javascript php ajax google-maps google-maps-markers

【解决方案1】：

    for (i = 0; i < jsonArray.locations.length; i++)   
    {
    var counter = jsonArray.locations[i];         
    var infowindow = new google.maps.InfoWindow();

    marker = new google.maps.Marker({
    position: new google.maps.LatLng(counter['lat'], counter['lon']),
    map: map,
    icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+i+'|FF0000|000000'
    });

    }

【讨论】：