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

Question

我有一个谷歌地图和一个标记，用于定位我的位置，它是一个带有infowindow的可拖动标记。

这里是我的代码

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

的几个注意事项：事件侦听器内

1. 代码（点击，dragend等），当事件被激活时，才会执行。
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 demo

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