如何在谷歌地图中点击更改纬度和经度答案

【问题标题】：How to do on click change lat and lon in google maps如何在谷歌地图中点击更改纬度和经度
【发布时间】：2012-09-27 05:20:25
【问题描述】：

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

    <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 表单代码输入纬度和经度，并且我有一个提交按钮。

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

地图还有一些其他的纬度和经度。但是当我在输入纬度和经度后单击提交时，我也应该更改其经度和经度。我该怎么做才能有人帮助我吗？

提前谢谢.. :)

【问题讨论】：

标签： html google-maps google-maps-api-3

【解决方案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>

【讨论】：

【解决方案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 技巧来实现相同的目标。

【讨论】：

【解决方案3】：

检查这个fiddle

在以下代码中，将 dragend 替换为您想要的 event。在你的情况下'点击'

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

【讨论】：