从 Marker Google Maps API 获取 Lat Lng答案

【问题标题】：Get Lat Lng From Marker Google Maps API从 Marker Google Maps API 获取 Lat Lng
【发布时间】：2018-12-23 08:23:08
【问题描述】：

如果提交了表单，有人可以帮我看看我的代码如何从标记中获取 lat 和 lng。

HTML

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" enctype="multipart/form-data" method="post" id="tambah">
<div class="billing-input">

    <div class="single-shipping-botton">
    <input id="pac-input" class="controls" type="text" placeholder="Input Location Name....">
    <div id="map" style="width:100%;height:500px;"></div>

</div>  
</div>
<button type="submit" onclick="saveData()">
    <span>Simpan</span>
</button>

Javascript

<script>

    function initMap() {
    var map = new google.maps.Map(
    document.getElementById("map"), {
    center: new google.maps.LatLng(1.474087, 124.841948),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    latLng = e.latLng;

    console.log(e.latLng.lat());
    console.log(e.latLng.lng());

    console.log("Marker");

    // if marker exists and has a .setMap method, hide it
    if (marker && marker.setMap) {
    marker.setMap(null);
    }
    marker = new google.maps.Marker({
    position: latLng,
    map: map
    });
    map.panTo(latLng);
    });


    var input = document.getElementById('pac-input');

    var autocomplete = new google.maps.places.Autocomplete(
        input, {placeIdOnly: true});
    autocomplete.bindTo('bounds', map);

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var geocoder = new google.maps.Geocoder;
    var marker = new google.maps.Marker({
      map: map
    });
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });

    autocomplete.addListener('place_changed', function() {
      infowindow.close();
      var place = autocomplete.getPlace();

      if (!place.place_id) {
        return;
      }
      geocoder.geocode({'placeId': place.place_id}, function(results, status) {

        if (status !== 'OK') {
          window.alert('Geocoder failed due to: ' + status);
          return;
        }
        map.setZoom(15);
        map.setCenter(results[0].geometry.location);   
            });
        });

    }

    function saveData() {
    var lat = marker.getPosition().lat();
    var lng = marker.getPosition().lng();

    }

【问题讨论】：

声明标记排除您可能已经定义的任何功能，例如在 intiMap() 之前只使用 'var marker = null'，然后 saveData 应该可以工作。
你想要服务器端的 lat-lng 还是客户端可以？
@dev8080 实际上我希望它发布以保存到 sql

标签： javascript ajax google-maps

【解决方案1】：

声明标记超越任何功能：

<script>

var marker = null;

function initMap() {
var map = new google.maps.Map(
...

由于您在服务器端需要它，您可以在表单中使用隐藏变量，例如：

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" enctype="multipart/form-data" method="post" id="tambah">
<div class="billing-input">

    <div class="single-shipping-botton">
    <input id="pac-input" class="controls" type="text" placeholder="Input Location Name....">
    <div id="map" style="width:100%;height:500px;"></div>

</div>  
</div>
<input type="hidden" name="lat" value="" />
<input type="hidden" name="lng" value="" />

<button type="submit" onclick="saveData()">
    <span>Simpan</span>
</button>

并使用提交函数来设置那些隐藏变量：

function saveData() {
 document.formname.lat.value = marker.getPosition().lat();
 document.formname.lng.value = marker.getPosition().lng();
}

在您的服务器端代码中，访问请求中发送的表单变量。

【讨论】：