Google Maps API Centered Marker + Geolocation

Я попытался написать переменные, чтобы попытаться поместить маркер, но он не работает. Сначала нужно попросить включить службы определения местоположения, а затем отобразить текущее местоположение пользователя с помощью маркера. Я не уверен, нужно ли мне отдельно указывать переменную «marker»? Или что-то не так с грамматикой?Google Maps API Centered Marker + Geolocation

Что я делаю неправильно?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>GMAP</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <!-- Google Maps API --> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0} 
     #map-canvas { height: 100%; margin-left:auto; margin-right:auto; } 
    </style> 

    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUuNJkdVKOzHyIclOyTki6uHwrYpKxaeg&sensor=true"> 
    </script> 

    <!-- GMaps GPS --> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script> 

    <script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
     zoom: 6 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 

     // Try HTML5 geolocation 
     if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      var pos = new google.maps.LatLng(position.coords.latitude, 
              position.coords.longitude); 

      var showPosition = function (position) { 
      var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      var marker = new google.maps.Marker({ 
       position: userLatLng, 
       title: 'Your Location', 
       map: map 
      }); 

      var infowindow = new google.maps.InfoWindow({ 
       map: map, 
       position: pos, 
      }); 

      map.setCenter(pos); 
      }; 

     }); 
     } 



     else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(false); 
     } 
    } 

     function handleNoGeolocation(errorFlag) { 
      if (errorFlag) { 
      var content = 'Error: The Geolocation service failed.'; 
      } else { 
      var content = 'Error: Your browser doesn\'t support geolocation.'; 
      } 

      var options = { 
      map: map, 
      position: new google.maps.LatLng(37.774929, -122.419416), 
      content: content 
      }; 

      var infowindow = new google.maps.InfoWindow(options); 
      map.setCenter(options.position); 
     } 



     google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 

<body> 

    <!-- Current Location Google Map API --> 
    <br /> 
    <div id="map-canvas" style="width: 30%; height: 30%"></div> 

    </body> 
</html>

источник

2014-01-29 Phillipe Dongwoo Han

Что не работает? Мы понятия не имеем. Создайте [jsfiddle] (http://jsfiddle.net), чтобы проиллюстрировать эту проблему. – MrUpsidown

Сообщается об одной ошибке: 'Предупреждение: вы включили API Карт Google несколько раз на этой странице. Это может вызвать непредвиденные ошибки. « –

Имеются две ошибки.

API Карт Google включен два раза, поэтому мы получаем сообщение: Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors. Один из включенных ссылок должен быть прокомментирован.

Следующий отсутствует звонок showPosition() функция. Даже если вы поставили там вызов, он не будет работать, потому что переменные используют pos и userLatLng, которые следует исправить. Здесь изменяются код:

... 
    navigator.geolocation.getCurrentPosition(function (position) { 
     //var pos = new google.maps.LatLng(position.coords.latitude, 
     //         position.coords.longitude); 

     //var showPosition = function (position) { 

      var userLatLng = new google.maps.LatLng(position.coords.latitude, 
              position.coords.longitude); 

      var marker = new google.maps.Marker({ 
       position: userLatLng, 
       title: 'Your Location', 
       map: map 
      }); 

      var infowindow = new google.maps.InfoWindow({ 
       // map: map, 
       content: 'Info for this place', 
       position: userLatLng 
      }); 

      map.setCenter(userLatLng); 
     //}; 

    }, function (err) { 
     // message if user denied geolocation 
     alert('Error(' + err.code + '): ' + err.message); 
    }); 
} else { 
...

InfoWindow не будет открыт, потому что нет слушателя событий для маркеров.

источник

2014-01-29 08:16:27

Не могу поверить, что я забыл на самом деле позвонить! Спасибо! –

Вам необходимо позвонить в showPosition, вы только заявляете об этом в данный момент.

источник

2014-01-29 08:03:20 Jonathan

Google Maps API Centered Marker + Geolocation

ответ

Смежные вопросы