標記拖動點擊事件谷歌地圖

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

希望這有助於！如果您有問題，請隨時提問！