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

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

这是我的代码

 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>

一些提示：

当脚本出现问题时，请避免使用不必要的代码。把它分解为本质
请始终将必要的代码与您的问题一起发布（您现在已经更新了它）。说得好
避免在不同的地方重复代码。为此创建函数

我现在明白了，您想要在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演示

希望这能有所帮助！如果您有问题，请随时提问！

相关内容

最新更新

热门标签：