单击时Maps API v3标记消失 [英] Maps API v3 Marker disappears on click

问题描述

首先，尽管这里还有其他一些类似的问题，但我无法根据我自己的代码来定制它们-这些问题似乎仍然源于其他地方.

Firstly, although there are several other similar issues on here I can't tailor them to my own code - the issues seem to still originate from elsewhere.

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

I'm trying to use the Google Maps API v3 to move the marker when you click anywhere on the map. I've already set it up so you can drag the marker, but I can't get the click to work. As you can see in my code, I've attempted this already.

预先感谢您的帮助.

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

推荐答案

我收到您的代码，当我单击以移动标记时:

I get a javascript error with your code, when I click to move the marker:

 Uncaught TypeError: undefined is not a function

在此行:

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

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

The this in a map click event is the map. You are using the click event incorrectly (looks like you got that code from a Google Maps Javascript API v2 example). The google.maps.eventMouseEvent object only has one property .latLng (javascript is case sensitive):

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

和功能签名是:

click MouseEvent当用户单击地图(而不是单击标记或信息窗口)时，将触发此事件.

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

工作小提琴

代码段:

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标记消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！