Question

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

当您点击地图上的任意位置时，我正在尝试使用Google Maps API v3移动标记。我已经设置好了你可以拖动标记，但我无法点击工作。正如您在我的代码中看到的那样，我已经尝试过了。

提前感谢您的帮助。

<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

当我点击移动标记时，your code出现javascript错误：

 Uncaught TypeError: undefined is not a function

在这一行：

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

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

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

而function signature是：

单击MouseEvent当用户单击地图时会触发此事件（但不会在用户单击标记或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>

Maps API v3标记在点击时消失

1 个答案: