Question

我想添加拖放谷歌Api。我已经制作了一张地图，但我不知道如何让它成为一个拖放。在那里，我想让我的纬度和经度是自动填充当我放下引脚

在这里我的观点：

 <label for="inputIsiBerita"> Latitude:</label>
         <input type="text" class="form-control" required name="latitude">
         <label for="inputIsiBerita"> Longitude</label>
         <input type="text" class="form-control" required name="longitude">

这是我的剧本：

<script>
              function initMap() {
                var map = new google.maps.Map(document.getElementById('map'), {
                  center: {lat: -7.0157404, lng: 110.4171283},
                  zoom: 12
                });
                var input = /** @type {!HTMLInputElement} */(
                    document.getElementById('pac-input'));

                var types = document.getElementById('type-selector');
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

                var autocomplete = new google.maps.places.Autocomplete(input);
                autocomplete.bindTo('bounds', map);

                var infowindow = new google.maps.InfoWindow();
                var marker = new google.maps.Marker({
                  map: map,
                  anchorPoint: new google.maps.Point(0, -29)
                });

                autocomplete.addListener('place_changed', function() {
                  infowindow.close();
                  marker.setVisible(false);
                  var place = autocomplete.getPlace();
                  if (!place.geometry) {
                    window.alert("Autocomplete's returned place contains no geometry");
                    return;
                  }

                  // If the place has a geometry, then present it on a map.
                  if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                  } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);  // Why 17? Because it looks good.
                  }
                  marker.setIcon(/** @type {google.maps.Icon} */({
                    url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(35, 35)
                  }));
                  marker.setPosition(place.geometry.location);
                  marker.setVisible(true);

                  var address = '';
                  if (place.address_components) {
                    address = [
                      (place.address_components[0] && place.address_components[0].short_name || ''),
                      (place.address_components[1] && place.address_components[1].short_name || ''),
                      (place.address_components[2] && place.address_components[2].short_name || '')
                    ].join(' ');
                  }

                  var latitude = place.geometry.location.lat();
                  var longitude = place.geometry.location.lng(); 

                  $("input[name=coordinate]").val(address);
                  $("input[name=latitude]").val(latitude);
                  $("input[name=longitude]").val(longitude);

                  infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
                  infowindow.open(map, marker);
                });

                // Sets a listener on a radio button to change the filter type on Places
                // Autocomplete.
                function setupClickListener(id, types) {
                  var radioButton = document.getElementById(id);
                  radioButton.addEventListener('click', function() {
                    autocomplete.setTypes(types);
                  });
                }

                setupClickListener('changetype-all', []);
                setupClickListener('changetype-address', ['address']);
                setupClickListener('changetype-establishment', ['establishment']);
                setupClickListener('changetype-geocode', ['geocode']);
              }
            </script>               
            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5NI4m71IlUMe9iBGvzg36RzwFE7dLavs&libraries=places&callback=initMap"
        async defer></script>

当我拖动它时，它将自动更改点latitude和longitude

Answer 1

使标记可拖动：

var marker = new google.maps.Marker({
  map: map,
  anchorPoint: new google.maps.Point(0, -29),
  draggable: true
});

为更新纬度和经度的dragend事件添加一个监听器：

google.maps.event.addListener(marker, 'dragend', function() {
  document.getElementsByName('latitude')[0].value = marker.getPosition().lat();
  document.getElementsByName('longitude')[0].value = marker.getPosition().lng();
})

proof of concept fiddle

代码段

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -7.0157404,
      lng: 110.4171283
    },
    zoom: 12
  });
  var input = /** @type {!HTMLInputElement} */ (
    document.getElementById('pac-input'));

  var types = document.getElementById('type-selector');
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29),
    draggable: true
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    document.getElementsByName('latitude')[0].value = marker.getPosition().lat();
    document.getElementsByName('longitude')[0].value = marker.getPosition().lng();
  })

  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17); // Why 17? Because it looks good.
    }
    marker.setIcon( /** @type {google.maps.Icon} */ ({
      url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

    var latitude = place.geometry.location.lat();
    var longitude = place.geometry.location.lng();

    $("input[name=coordinate]").val(address);
    $("input[name=latitude]").val(latitude);
    $("input[name=longitude]").val(longitude);

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
  });

  // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.
  function setupClickListener(id, types) {
    var radioButton = document.getElementById(id);
    radioButton.addEventListener('click', function() {
      autocomplete.setTypes(types);
    });
  }

  setupClickListener('changetype-all', []);
  setupClickListener('changetype-address', ['address']);
  setupClickListener('changetype-establishment', ['establishment']);
  setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="pac-input" />
<div id="type-selector" class="controls">
  <input type="radio" name="type" id="changetype-all" checked="checked">
  <label for="changetype-all">All</label>

  <input type="radio" name="type" id="changetype-establishment">
  <label for="changetype-establishment">Establishments</label>

  <input type="radio" name="type" id="changetype-address">
  <label for="changetype-address">Addresses</label>

  <input type="radio" name="type" id="changetype-geocode">
  <label for="changetype-geocode">Geocodes</label>
</div>
<label for="inputIsiBerita">Latitude:</label>
<input type="text" class="form-control" required name="latitude">
<label for="inputIsiBerita">Longitude</label>
<input type="text" class="form-control" required name="longitude">
<div id="map"></div>

Answer 2

要创建标记，您应该使用以下代码：

Marker m = mMap.addMarker(new MarkerOptions()
            .position(new LatLng(12, 12))
            .title("title")
            .snippet("snippet"));

然后你需要做的就是让它可以拖动：添加：

   Marker m = mMap.addMarker(new MarkerOptions()
                .position(new LatLng(12, 12))
                .title("title")
                .snippet("snippet")
                .draggable(true));

将draggable设为true，它允许将标记从一个地方拖到另一个地方。

谷歌地图api拖放针

2 个答案: