2016-03-07 67 views
0

目前我有一张工作地图,可以使用我添加的“查找我”按钮自动查找我的位置。我想改变它,而不是让用户可以在任何位置键入表单。我将如何去改变它?我是一个初学者,提前感谢。如何将我的Google地图功能从自动查找我的位置更改为让我输入位置?

<!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

我觉得这个[谷歌地图示例](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> 
相关问题