Question

我有两个输入字段和一个地图，我想要做的是当我在任何位置点击地图时显示经度和纬度，我该怎么做？这是我的代码：

#map {
  width: 100%;
  height: 250px;
}

<div class="form-group">
    <label for="exampleInputEmail1">Latitude</label>
    <input placeholder="Latitude">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Longitude</label>
    <input placeholder="Longitude">
  </div>

<div id="map"></div>
<script>
  function myMap() {
    var mapOptions = {
      center: new google.maps.LatLng(51.5, -0.12),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Answer 1

您可以在地图上点击事件监听器。

下面是

的代码

  google.maps.event.addListener(map, 'click', function(event) {

    alert(event.latLng);

});

＆＃13;

#map {
  width: 100%;
  height: 250px;
}

＆＃13;

<div class="form-group">
    <label for="exampleInputEmail1">Latitude</label>
    <input placeholder="Latitude" id="lat">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Longitude</label>
    <input placeholder="Longitude" id="lang">
  </div>

<div id="map"></div>
<script>
  function myMap() {
    var mapOptions = {
      center: new google.maps.LatLng(51.5, -0.12),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    
    google.maps.event.addListener(map, 'click', function(event) {

    
     var myLatLng = event.latLng;
     var lat = myLatLng.lat();
     var lng = myLatLng.lng();
     
      document.getElementById("lat").value = lat;
      document.getElementById("lang").value = lng;
   
});
    
    
  }
  
 
</script>
<script>

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

<script>
  
</script>

＆＃13;

注意：您无法在没有api密钥的情况下使用谷歌地图。在您的申请连续90天每天达到25.000个电话之前，该用法是免费的。

在输入字段中显示地图坐标

1 个答案: