Question

我试图在一张地图上显示用户的当前位置以及我从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获取信息，我必须通过纬度和经度，这样我才能得到半径为1km的用户以及过去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');
}

Answer 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'
    });

    }

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

1 个答案: