Показать местоположение пользователя на картах Google - PullRequest
Новая
       6

Показать местоположение пользователя на картах Google

0 голосов
/ 05 сентября 2018

Во-первых, я скажу вам, что я новичок в Google Maps, и некоторые из них меня очень смущают. Что мне нужно сделать, это показать местоположение пользователей и показать соответствующие маркеры. У меня есть готовая база данных и немного карты Google.

Я работаю с примером из здесь . То, что я могу получить, это маркеры, если я использую статический LatLng, или просто динамическое местоположение пользователя без маркеров.

Нужна помощь, пожалуйста. И если вы отрицаете это сообщение, пожалуйста, дайте мне знать, почему.

Код, который я использую, можно найти по адресу https://jsfiddle.net/8q1apmdy/9/ и показать, где в коде удара есть то, где я что-то упускаю, скорее всего маленький или в неправильном положении. 

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

      var map = new google.maps.Map(document.getElementById('map'), {
          center: pos,
          zoom: 12
          });         
}

1 Ответ

0 голосов
/ 06 сентября 2018

а) Во время локального запуска вашего кода я получил неопределенное значение pos, поэтому я переместил следующий код ' var map = new google.maps.Map (.. ' внутри getCurrentPosition () {... б) Затем я получил еще одну ошибку «InvalidValueError: setMap: не экземпляр Map;» так создал «карту вар» во всем мире. Загрузил карту успешно, но маркеры все еще не были загружены. во время отладки вашего кода на этом этапе ' var marker = new google.maps.Marker ({... ' он выполняет итерацию для всех маркеров из xml, но каким-то образом маркеры не добавляются на карту .. не знаю причина еще?

Так что я попробовал по-другому. Пожалуйста, посмотрите все маркеры из XML отображаются на карте. Здесь я просто получаю ' name ' в маркере, вам может потребоваться добавить другие параметры, такие как id, адрес и т. Д. JSFiddle добавлен для справки 

var infowindow;
var map;
 //var downloadUrl;

    function initialize() {
      var mapOptions = {
          zoom: 12,
          center: new google.maps.LatLng(-33.868820, 151.209290),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      downloadUrl("https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml", function(data) {
        var bounds = new google.maps.LatLngBounds();
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');        
        for (var i = 0; i < markers.length; i++) {
              var id =  markers[i].getAttribute('id');              
              var address = markers[i].getAttribute('address');
              var type = markers[i].getAttribute('type');
          var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                              parseFloat(markers[i].getAttribute("lng")));
          bounds.extend(latlng);
          var marker = createMarker(id, markers[i].getAttribute("name"), address, latlng, type);
        }//finish loop
        //map.fitBounds(bounds);
      }); //end downloadurl
      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    }

    function createMarker(id, name, address, latlng, type) {
       var marker = new google.maps.Marker({
                               position: latlng,                               
                               map: map
                               });
       google.maps.event.addListener(marker, "click", function() {
         if (infowindow) infowindow.close();
         infowindow = new google.maps.InfoWindow({content: name});
         infowindow.open(map, marker);
       });
       return marker;
    }

JSFiddle

...