google-maps - 标记拖动点击事件谷歌地图

Question

我有一个谷歌地图和一个定位我位置的标记，它是一个带有信息窗口的可拖动标记。

这是我的代码

 var marker;
 var infowindowPhoto;  
 var latPosition;
 var longPosition;
 var newLocationLat;
 var newLocationLong;  

function initializeMarker()
 {

  if(navigator.geolocation) 
  {
    navigator.geolocation.getCurrentPosition(function(position) 
    {
      var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

       latPosition = position.coords.latitude;
       longPosition = position.coords.longitude;

       //alert("Latitude:"+latPosition);
       //alert("Longitude:"+longPosition);

      marker = new google.maps.Marker
      ({
          position: pos,
          draggable:true,
          animation: google.maps.Animation.DROP,
          map: map

      });         
        markersArray.push(marker);

        google.maps.event.addListener(marker, 'click', function (event) 
        {
            infowindowPhoto.open(map,marker); 

            document.getElementById("latbox").value = this.getPosition().lat();
            document.getElementById("lngbox").value = this.getPosition().lng();

            latPosition = this.getPosition().lat();
            longPosition = this.getPosition().lng(); 

        });


        google.maps.event.addListener(marker,'dragend', function (event)
        {
            infowindowPhoto.open(map,marker);  

            document.getElementById("latbox").value = this.getPosition().lat();
            document.getElementById("lngbox").value = this.getPosition().lng();

            newLocationLat = this.getPosition().lat();
            newLocationLong = this.getPosition().lng();                             
        });

        infowindowPhoto.open(map,marker);

         map.setCenter(pos);
    },
    function()
    {
      handleNoGeolocation(true);
    });
  } 
    else 
  {

    handleNoGeolocation(false);
  }

    contentString ='<h1 id="firstHeading" class="firstHeading">Uluru</h1>';

    infowindowPhoto = new google.maps.InfoWindow
   ({
       content: contentString
   });
}   

function Alert() 
{

    alert("Latitude:"+latPosition);
    alert("Longitude:"+longPosition);

    alert("newLatitude:"+newLocationLat);
    alert("newLongitude:"+newLocationLong);

}

标记首先位于我的位置，如果我不拖动标记，它会在提醒我的位置的功能中显示我。因此，在函数 aloert 的两个拳头警报中，它显示了我的位置，而另外两个警报未定义。

现在我的问题是，当我不移动标记时，此功能将起作用

google.maps.event.addListener(marker, 'click', function (event) 
        {
            infowindowPhoto.open(map,marker); 

            document.getElementById("latbox").value = this.getPosition().lat();
            document.getElementById("lngbox").value = this.getPosition().lng();

            latPosition = this.getPosition().lat();
            longPosition = this.getPosition().lng(); 

        });

我希望当我拖动标记时这个功能起作用

        google.maps.event.addListener(marker,'dragend', function (event)
        {
            infowindowPhoto.open(map,marker);  

            document.getElementById("latbox").value = this.getPosition().lat();
            document.getElementById("lngbox").value = this.getPosition().lng();

            newLocationLat = this.getPosition().lat();
            newLocationLong = this.getPosition().lng();                             
        });

所以我只能展示我的新位置。感谢您的帮助

//////////////////////////////更新////////////////////////////////// 我有这段代码可以在 html 输入中显示新的纬度和经度:

<div id="latlong">
<p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p>
<p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p>

Answer 1

一些提示:

1. 在脚本出现问题时避免使用不必要的代码。将其分解为基本要素。
2. 始终将必要的代码与您的问题一起发布(您现在已经更新了它)。好点。
3. 避免在不同地方重复代码。为此创建函数。

我现在了解到您想在 2 个输入中显示用户位置。我以为您想在信息窗口中显示它，这是我在下面的代码中所做的(但主要思想是相同的)。

一些注意事项:

1. 事件监听器中的代码(点击、拖动等)仅在触发事件时执行。
2. 当您想要更新其内容时，您可以使用信息窗口的 setContent 方法。

代码如下:

var map;
var marker;
var infowindowPhoto = new google.maps.InfoWindow();
var latPosition;
var longPosition;

function initialize() {

    var mapOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(10,10)
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    initializeMarker();
}

function initializeMarker() {

    if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(function (position) {

            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            latPosition = position.coords.latitude;
            longPosition = position.coords.longitude;

            marker = new google.maps.Marker({
                position: pos,
                draggable: true,
                animation: google.maps.Animation.DROP,
                map: map
            });

            map.setCenter(pos);
            updatePosition();

            google.maps.event.addListener(marker, 'click', function (event) {
                updatePosition();
            });

            google.maps.event.addListener(marker, 'dragend', function (event) {
                updatePosition();
            });
        });
    }
}

function updatePosition() {

    latPosition = marker.getPosition().lat();
    longPosition = marker.getPosition().lng();

    contentString = '<div id="iwContent">Lat: <span id="latbox">' + latPosition + '</span><br />Lng: <span id="lngbox">' + longPosition + '</span></div>';

    infowindowPhoto.setContent(contentString);
    infowindowPhoto.open(map, marker);
}

initialize();

这是演示:

JSFiddle demo

希望对您有所帮助!如果您有任何疑问，请随时提问!