點擊谷歌地圖上的地方標記javascript api

Question

我已經在JS Apis中編寫了谷歌地圖。

我想要實現的是，無論用戶點擊什麼，它都會將標記放置在那裏並輸出其Lat和Lng。

我所取得的成績是無論我點擊哪個位置，都會輸出Lat和Lng，而不會在此處拖動標記。

這裏的小提琴 - http://jsfiddle.net/sarthakbatra1991/87v0obb4/#&togetherjs=3aTj11AiwO

google.maps.event.addListener(map, 'click', function (event) { 


     document.getElementById("lat").value = event.latLng.lat(); 
     document.getElementById("long").value = event.latLng.lng(); 
     marker.setPosition(lat, lng); 
     marker.setMap(map); 

    }); 

請看着它幫助我在這裏。

乾杯！

Answer 1

lat和lng未在click監聽器中定義。這應該工作：

google.maps.event.addListener(map, 'click', function (event) { 
    document.getElementById("lat").value = event.latLng.lat(); 
    document.getElementById("long").value = event.latLng.lng(); 
    marker.setPosition(event.latLng); 
}); 

updated fiddle

代碼片段：

function initialize() { 
 
    var myLatlng = new google.maps.LatLng(40.713956, -74.006653); 
 

 
    var myOptions = { 
 
    zoom: 8, 
 
    center: myLatlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 

 
    var marker = new google.maps.Marker({ 
 
    draggable: true, 
 
    position: myLatlng, 
 
    map: map, 
 
    title: "Your location" 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'dragend', function(event) { 
 
    document.getElementById("lat").value = event.latLng.lat(); 
 
    document.getElementById("long").value = event.latLng.lng(); 
 
    }); 
 

 
    google.maps.event.addListener(map, 'click', function(event) { 
 
    document.getElementById("lat").value = event.latLng.lat(); 
 
    document.getElementById("long").value = event.latLng.lng(); 
 
    marker.setPosition(event.latLng); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize());

<style> html, 
 
body, 
 
#map_canvas { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100% 
 
} 
 
</style>

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
Lat: 
 
<input id="lat" name="lat" val="40.713956" />Long: 
 
<input id="long" name="long" val="74.006653" /> 
 
<br /> 
 
<br /> 
 
<div id="map_canvas" style="width: 500px; height: 250px;"></div>