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

一些提示：

当您遇到脚本问题时，请避免使用不必要的代码。把它分解为必要的。
始终使用您的问题发布必要的代码（您现在已经更新了它）。好点。
避免在不同位置复制代码。为此创建功能。

我现在明白你想在2个输入中显示用户位置。我以为你想在infowindow中显示它，这就是我在下面的代码中所做的（但主要思想是相同的）。

一些注意事项：

事件监听器中的代码（click，dragend等）仅在事件被触发时执行。
如果要更新其内容，可以使用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();

以下是演示：

JSFiddle demo

希望这有帮助！如果您有任何疑问，请随时提出！

标记拖动单击事件Google地图

1 个答案: