Question

有人可以帮我看看我的代码吗（如果提交了表单）如何从标记中获取经纬度。

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();

    }

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

并使用Submit函数设置那些隐藏变量：

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

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

从Marker Google Maps API获取Lt Lng

1 个答案: