如何在 Google Maps API v3 中同时拖动标记并单击设置？

Question

我是 Google Maps API v3 的新手，我正在尝试添加点击事件侦听器以重新设置标记，但我也希望能够拖动标记。

其实我只能拖动标记，这是我的代码：

var lat = null;
var lng = null;
var map = null;
var geocoder = null;
var marker = null;

jQuery(document).ready(function(){
     lat = jQuery('#lat').val();
     lng = jQuery('#long').val();
     jQuery('#pasar').click(function(){
        codeAddress();
        return false;
     });
    initialize();
});

    function initialize() {

      geocoder = new google.maps.Geocoder();

       if(lat !='' && lng != '')
      {
         var latLng = new google.maps.LatLng(lat,lng);
      }
      else
      {
         var latLng = new google.maps.LatLng(11.027113, -63.862023);
      }
       var myOptions = {
          center: latLng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP 
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        marker = new google.maps.Marker({
            map: map,
            position: latLng,
            draggable: true 
        });

        updatePosition(latLng);


    }

    function codeAddress() {

        var address = document.getElementById("direccion").value;
        geocoder.geocode( { 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            marker.setPosition(results[0].geometry.location);
            updatePosition(results[0].geometry.location);

            google.maps.event.addListener(marker, 'dragend', function(){
                updatePosition(marker.getPosition());
            });
      } else {
          alert("No podemos encontrar la direccion, error: " + status);
      }
    });
  }

  function updatePosition(latLng)
  {

       jQuery('#lat').val(latLng.lat());
       jQuery('#long').val(latLng.lng());

  }

我尝试添加以下代码：

myListener = google.maps.event.addListener(map, 'click', function(event) {
        if(marker){marker.setMap(null)}
        placeMarker(event.latLng);
        google.maps.event.removeListener(myListener);
    });

但它不起作用。 我想用两个选项放置标记，拖动并单击。我如何在我的代码中实现这一点？ 谢谢！

Answer 1

您的代码中没有 placeMarker 函数，并且不确定为什么您只希望在地图上的第一次单击时放置标记（之后您将移除侦听器）。这就是我认为你想要的：

var lat = null;
var lng = null;
var map = null;
var geocoder = null;
var marker = null;
var myListener = null;

jQuery(document).ready(function() {
  lat = jQuery('#lat').val();
  lng = jQuery('#long').val();
  jQuery('#pasar').click(function() {
    codeAddress();
    return false;
  });
  initialize();
});

function initialize() {

  geocoder = new google.maps.Geocoder();

  if (lat != '' && lng != '') {
    var latLng = new google.maps.LatLng(lat, lng);
  } else {
    var latLng = new google.maps.LatLng(11.027113, -63.862023);
  }
  var myOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  marker = new google.maps.Marker({
    map: map,
    position: latLng,
    draggable: true
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    updatePosition(marker.getPosition());
  });
  updatePosition(latLng);
  google.maps.event.addListener(map, 'click', function(event) {
    if (marker) {
      marker.setPosition(event.latLng)
    } else {
      marker = new google.maps.Marker({
        map: map,
        position: event.latLng,
        draggable: true
      });
    }
    updatePosition(event.latLng);
  });

}

function codeAddress() {

  var address = document.getElementById("direccion").value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      marker.setPosition(results[0].geometry.location);
      updatePosition(results[0].geometry.location);

      google.maps.event.addListener(marker, 'dragend', function() {
        updatePosition(marker.getPosition());
      });
    } else {
      alert("No podemos encontrar la direccion, error: " + status);
    }
  });
}

function updatePosition(latLng) {

  jQuery('#lat').val(latLng.lat());
  jQuery('#long').val(latLng.lng());

}

html,
body,
#map_canvas {
  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"></script>
<input id="lat" value="42" />
<input id="long" value="-85" />
<input id="pasar" type="button" value="geocode" />
<input id="direccion" value="New York, NY" />
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>