Question

我正在使用此代码来获取谷歌地图。

    <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
  var latlng = new google.maps.LatLng(52.000,17.1100);
    var myOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
    });

  var infoWindow = new google.maps.InfoWindow({
    position: latlng,
    content: '<b>Theater Address:</b><br> <?php echo $row['address']; ?>'
  });
  infoWindow.open(map);
  }
</script>

我正在使用这个html表单代码输入lat和lon，我有一个提交按钮。

<form  method="post" autocomplete="off">
        <p>
            <b>lat</b> <label>:</label>
            <input type="text" name="lat" id="lat" />
            <b>lon</b> <label>:</label>
            <input type="text" name="lon" id="lon" />
        </p>
        <input type="submit" value="Show location" />
    </form>

地图还有其他一些lat和lon。但是当我在输入lat和lon后点击提交时我也应该更改它的lat和lon。我可以这样做吗能有人帮助我吗？

提前致谢.. :)）

Answer 1

我已经从初始化函数中添加了一些变量，使它们可用于单击按钮。我在您的提交按钮中添加了一个ID，其中包含jquery。这对我有用：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #map_canvas { height: 400px; width: 500px }
    </style>
  </head>
  <body>
    <div id="map_canvas"></div>
    <form  method="post" autocomplete="off">
      <p>
        <b>lat</b> <label>:</label>
        <input type="text" name="lat" id="lat" />
        <b>lon</b> <label>:</label>
        <input type="text" name="lon" id="lon" />
      </p>
      <input type="submit" value="Show location" id="submit"/>
    </form>
    <script src="jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
     <script type="text/javascript">
       var latlng = new google.maps.LatLng(52.000,17.1100);
       var myOptions = {
         zoom: 12,
         center: latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       function initialize() {
         var marker = new google.maps.Marker({
           position: latlng,
           map: map,
         });

         var infoWindow = new google.maps.InfoWindow({
           position: latlng,
           content: '<b>Theater Address:</b>'
         });
        infoWindow.open(map);
      }

      initialize();

      $("#submit").on("click", function(evt) {
        evt.preventDefault();
        var lat = $("input#lat").val();
        var lon = $("input#lon").val();
        latlng = new google.maps.LatLng(lat,lon)
        map.setCenter(latlng)
  })
  </script>
</body>

Answer 2

你可以通过多种方式实现这一目标。

我可以用以下方式建议你：

创建另一种显示地图的方法：

function re_create_map() {
  var latlng = new google.maps.LatLng(document.getElementById("lat").value,document.getElementById("lon").value);
               map.setCenter(latlng);           
}

  <input type="button" onclick="re_create_map()" value="Show location" />

注意*：由于我们不需要提交此表单，因此无需输入type =“submit”，我们只能在客户端实现此功能。

或者您可以尝试其他一些javascript技巧来实现相同的目标。

Answer 3

选中此fiddle

在以下代码中，将dragend替换为您想要的event。在您的情况下＆＃39;点击＆＃39;

google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("defaultLatitude").value = event.latLng.lat();
    document.getElementById("defaultLongitude").value = event.latLng.lng();
});

如何在谷歌地图中点击更改lat和lon

3 个答案: