javascript - map API v3 标记在点击时消失

Question

首先，虽然这里还有其他几个类似的问题，但我无法根据我自己的代码定制它们 - 这些问题似乎仍然源自其他地方。

我正在尝试使用 Google Maps API v3 在您单击 map 上的任意位置时移动标记。我已经进行了设置，以便您可以拖动标记，但我无法让单击起作用。正如您在我的代码中看到的，我已经尝试过这样做。

预先感谢您的帮助。

<script type="text/javascript">
  var map;
function initialize() {
var myLatlng = new google.maps.LatLng(51.9,-2.08);

var myOptions = {
 zoom: 13,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

var marker = new google.maps.Marker({
 draggable: true,
 position: myLatlng,
 map: map,
 title: "Your location"
});

google.maps.event.addListener(marker, 'dragend', function (overlay, point) {
 document.getElementById("P102_LATITUDE").value = this.getPosition().lat();
 document.getElementById("P102_LONGITUDE").value = this.getPosition().lng();
});
google.maps.event.addListener(map, 'click', function(overlay, point) {
 marker.setPosition(event.latlng); 
 document.getElementById("P102_LATITUDE").value = this.getPosition().lat();
 document.getElementById("P102_LONGITUDE").value = this.getPosition().lng();
});
}

google.maps.event.addDomListener(window, 'load', initialize);

</script> 

Answer 1

我收到一个 JavaScript 错误 your code ，当我单击移动标记时:

 Uncaught TypeError: undefined is not a function

在这一行:

document.getElementById("P102_LATITUDE").value = this.getPosition().lat();

map 点击事件中的this是 map 。您错误地使用了点击事件(看起来您是从 Google Maps Javascript API v2 示例中获取该代码)。 google.maps.eventMouseEvent对象只有一个属性.latLng(javascript 区分大小写):

 Properties  Type    DescriptionlatLng      LatLng  The latitude/longitude that was below the cursor when the event occurred.

and the function signature is:

click MouseEvent This event is fired when the user clicks on the map (but not when they click on a marker or infowindow).

google.maps.event.addListener(map, 'click', function(event) {
 marker.setPosition(event.latLng); 
 document.getElementById("P102_LATITUDE").value = marker.getPosition().lat();
 document.getElementById("P102_LONGITUDE").value = marker.getPosition().lng();
});

working fiddle

代码片段:

var map;

function initialize() {
  var myLatlng = new google.maps.LatLng(51.9, -2.08);

  var myOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

  var marker = new google.maps.Marker({
    draggable: true,
    position: myLatlng,
    map: map,
    title: "Your location"
  });

  google.maps.event.addListener(marker, 'dragend', function(event) {
    document.getElementById("P102_LATITUDE").value = this.getPosition().lat();
    document.getElementById("P102_LONGITUDE").value = this.getPosition().lng();
  });
  google.maps.event.addListener(map, 'click', function(event) {
    marker.setPosition(event.latLng);
    document.getElementById("P102_LATITUDE").value = marker.getPosition().lat();
    document.getElementById("P102_LONGITUDE").value = marker.getPosition().lng();
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="P102_LATITUDE" />
<input id="P102_LONGITUDE" />
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>