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

Question

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

google-mapsgoogle-maps-api-3dictionarygoogle-maps-markers

3

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

以下是我的代码:

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

- Katsudoka

latboxه’Œlngboxوک¯ن»€ن¹ˆï¼ں - MrUpsidown

你好，MrUpsidown，感谢你的回答。请问你能否看一下上面帖子中的更新部分？ - Katsudoka

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MrUpsidown · Accepted Answer

一些提示：

如果您在处理脚本时出现问题，请避免不必要的代码。将其分解为关键部分。
始终在您的问题中发布必要的代码（您已更新）。很好的观点。
避免在不同位置重复使用代码。为此创建函数。

我现在明白您想要在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();

以下是演示:

JSFiddle演示

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