Center map on user's location (Google Maps API

问题:

I've looked a lot of various other reports about this problem, but I can't find the solution to get the location of user.

Here is my code:

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true'>
</script>
<script>



    // prepare variables
    var main = document.getElementById('main');

    // async XHR request
    var xhReq = new XMLHttpRequest();
    xhReq.open('GET','../data/data.json', true);
    xhReq.onload = function (e) {
        if ((xhReq.readyState === 4) && (xhReq.status === 200)) {

            // prepare external data
            var data = JSON.parse(xhReq.responseText);

            // prepare map
            var map;
           // var bounds  = new google.maps.LatLngBounds();
            var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(54.6867151,25.2803843)
            };
            map = new google.maps.Map(main,mapOptions);

            // add all data to the map
            for(i=0;i<data.length;i++){

             //   loc = new google.maps.LatLng(data[i].lat,data[i].lng);
              //  bounds.extend(loc);
                window['marker'+i] = new google.maps.Marker({
                    position: new google.maps.LatLng(data[i].lat,data[i].lng),
                    map: map,
                    title: data[i].name,
                    articles: data[i].articles
                }

                ); 

                // add onClick function
                google.maps.event.addListener(window['marker'+i], 'click', function() {
                    // magic should be here
                    var data = this.articles;
                    var list = document.getElementById('list');
                    var main = document.getElementById('main');
                    list.innerHTML = '';
                    list.style="width:25%;";
                    for(i=0;i<data.length;i++){

                        list.innerHTML += '<a href="' + data[i].url + '" target="_blank"><div class="listImg" style="background-image:url(' + data[i].img + ');"><\/div><span class="topic">(' + data[i].topic + ')<\/span> <h1>' + data[i].name + ' <\/h1><span class="date">(' + data[i].date + ')<\/span><\/a>';
                    };

                });

            };

            // recenter + rezoom
         //   map.fitBounds(bounds);
           // map.panToBounds(bounds); 

        };
    };
    xhReq.send(null);




</script>

It sets the center of map to exact coordinates which are in code.
Thanks for your support.

English isn’t my first language, so please excuse any mistakes.

回答1:

Getting the user location is a browser feature that most modern browsers support. However, you still need to test for the ability to get the location in your code.

if (navigator.geolocation) { // test for presence of location feature
  navigator.geolocation.getCurrentPosition(function(position) {
    initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    map.setCenter(initialLocation);
  }, function() {
    console.log('user denied request for position');
  });
} else {
  console.log('no geolocation support');
}