2016-03-07 2 views
0

В настоящее время у меня есть рабочая карта, которая может автоматически найти мое местоположение с помощью кнопки «Найти меня», которую я добавил. Я хотел бы изменить это, вместо того, чтобы иметь форму, в которой пользователь мог бы ввести любое местоположение. Как мне это изменить? Я новичок, спасибо заранее.Как мне изменить функцию Google Map, чтобы автоматически найти мое местоположение, чтобы заставить меня ввести местоположение?

<!DOCTYPE html> 
<html lang=""> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title></title> 
</head> 

<body> 

    <a href="#" id="get_location">Find Me</a> 
    <div id="map"> 
     <iframe id="google_map" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk?output=embed"></iframe> 
    </div> 

    <script> 
     var c = function (pos) { 
      var lat = pos.coords.latitude, 
       long = pos.coords.longitude, 
       coords = lat + ', ' + long; 

      document.getElementById('google_map').setAttribute('src', 'https://maps.google.co.uk/?q=' + coords + '&z=60&output=embed'); 
     } 

     document.getElementById('get_location').onclick = function() { 
      navigator.geolocation.getCurrentPosition(c); 
      return false; 
     } 
    </script> 
</body> 

</html> 
+0

Я думаю, что это [Google Map пример] (https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple) - это более или менее то, что вы ищете. – Mikey

ответ

0

Этот код, кажется, работает, используя ссылку в виде кнопки, как вы делали:

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title></title> 
</head> 

<body> 
    <div id="map"> 
     <iframe id="google_map" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk?output=embed"></iframe> 
    </div> 

    <form> 
    Latitude:<br> 
    <input type="text" id="latitude"><br> 
    Longitude:<br> 
    <input type="text" id="longitude"> 
    </form> 
    <a href="#" id="get_location">Find This</a> 

    <script> 
     document.getElementById('get_location').onclick = function() { 
      var lat = document.getElementById('latitude').value 
      var long = document.getElementById('longitude').value 
      coords = lat + ', ' + long; 

      document.getElementById('google_map').setAttribute('src', 'https://maps.google.co.uk/?q=' + coords + '&z=60&output=embed'); 
     } 

    </script> 
</body> 

</html> 
Смежные вопросы