Google maps 标记拖动单击事件Google Maps

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

这是我的密码

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

}

当我拖动标记时，我希望该函数可以工作

        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个输入中显示用户位置。我以为您想在infowindow中显示它，这就是我在下面代码中所做的（但主要思想是相同的）

请注意：

事件侦听器中的代码（单击、拖动等）仅在触发事件时执行

要更新信息窗口的内容时，可以使用信息窗口的

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

var映射；
var标记；
var infowindowPhoto=new google.maps.InfoWindow（）；
变位；
变位；
函数初始化（）{
变量映射选项={
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：新google.maps.LatLng（10,10）
};
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
初始化标记（）；
}
函数初始化标记（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos=新的google.maps.LatLng（position.coords.lation，position.coords.longitude）；
latPosition=位置坐标纬度；
longPosition=position.coords.longitude；
marker=新的google.maps.marker({
职位:pos,，
真的，
动画：google.maps.animation.DROP，
地图：地图
});
地图设置中心（pos）；
updatePosition（）；
google.maps.event.addListener（标记，'click'，函数（事件）{
updatePosition（）；
});
google.maps.event.addListener（标记'dragend'，函数（事件）{
updatePosition（）；
});
});
}
}
函数updatePosition（）{
latPosition=marker.getPosition（）.lat（）；
longPosition=marker.getPosition（）.lng（）；
contentString='Lat:'+latPosition+'
Lng:'+longPosition+'；
infowindowPhoto.setContent（contentString）；
infowindowPhoto.open（地图、标记）；
}
初始化（）；

这是演示：

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

---

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

什么是

latbox

和

lngbox

？你好MrUpsidown谢谢你的回答，你能看到上面帖子的更新部分吗真的非常感谢你的帮助，我能问个问题吗，我能在另一个函数中提醒纬度和经度值吗，例如，如果我必须将这些值发送到服务器？如果我只是在另一个函数中提醒纬度和经度，它不能显示未定义的？再次非常感谢：）当然，只需从

updatePosition（）函数调用它即可：