รับ Lat / Lng จากเครื่องหมาย Google


90

ฉันสร้างแผนที่ Google Maps ด้วยเครื่องหมายที่ลากได้ เมื่อผู้ใช้ลากเครื่องหมายฉันจำเป็นต้องรู้ละติจูดและลองจิจูดใหม่ แต่ฉันไม่เข้าใจว่าวิธีใดที่ดีที่สุดในการทำเช่นนั้น

ฉันจะดึงข้อมูลพิกัดใหม่ได้อย่างไร?

คำตอบ:


134

นี่คือJSFiddle สาธิต ใน Google Maps API V3 ค่อนข้างง่ายในการติดตาม lat และ lng ของเครื่องหมายลากได้ เริ่มต้นด้วย HTML และ CSS ต่อไปนี้เป็นฐานของเรา

<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>

#map_canvas{
    width: 400px;
    height: 300px;
}

#current{
     padding-top: 25px;
}

นี่คือ JavaScript เริ่มต้นของเราในการเริ่มต้นแผนที่ Google เราสร้างเครื่องหมายที่เราต้องการลากและตั้งค่าคุณสมบัติที่ลากได้เป็นจริง แน่นอนว่าควรแนบกับเหตุการณ์ onload ของหน้าต่างของคุณเพื่อให้โหลดได้ แต่ฉันจะข้ามไปที่รหัส:

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 1,
    center: new google.maps.LatLng(35.137879, -82.836914),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(47.651968, 9.478485),
    draggable: true
});

ที่นี่เราแนบสองเหตุการณ์dragstartเพื่อติดตามการเริ่มต้นของการลากและdragendการ drack google.maps.event.addListenerเมื่อหยุดเครื่องหมายได้รับการลากและวิธีที่เราแนบก็คือการใช้งาน สิ่งที่เรากำลังทำอยู่ที่นี่คือการตั้งค่าcurrentเนื้อหาของdiv เมื่อเครื่องหมายถูกลากจากนั้นตั้งค่า lat และ lng ของเครื่องหมายเมื่อการลากหยุด เหตุการณ์เมาส์ของ Google มีชื่อคุณสมบัติ 'latlng' ที่ส่งคืนออบเจ็กต์ 'google.maps.LatLng' เมื่อเหตุการณ์ทริกเกอร์ ดังนั้นสิ่งที่เรากำลังทำอยู่นี้โดยพื้นฐานแล้วคือการใช้ตัวระบุสำหรับผู้ฟังนี้ซึ่งได้รับกลับมาโดยgoogle.maps.event.addListenerและรับคุณสมบัติlatLngเพื่อแยกตำแหน่งปัจจุบันของ dragend เมื่อเราได้ Lat Lng แล้วเมื่อการลากหยุดเราจะแสดงภายในcurrentdiv ของคุณ:

google.maps.event.addListener(myMarker, 'dragend', function(evt){
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});

google.maps.event.addListener(myMarker, 'dragstart', function(evt){
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});

สุดท้ายเราจะวางเครื่องหมายไว้ตรงกลางและแสดงบนแผนที่:

map.setCenter(myMarker.position);
myMarker.setMap(map);

โปรดแจ้งให้เราทราบหากคุณมีคำถามเกี่ยวกับคำตอบของฉัน


3
ยอดเยี่ยมมาก! ฉันมีแผนที่ที่มีช่องกรอกที่อยู่อัตโนมัติและเครื่องหมายลากได้ ฉันต้องแสดงพิกัด lat long ด้วยถ้ามีคนใช้ช่องป้อนข้อมูล มีวิธีง่ายๆในการนี้หรือไม่?
Kirk Ross

41
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

ดูข้อมูลเพิ่มเติมได้ที่Google Maps API - LatLng


คุณmarkerจะสร้างอินสแตนซ์ก่อนที่จะเรียกวิธีการอย่างไร ตัวอย่างเช่นฉันกำลังดูdeveloper.google.com/maps/documentation/javascript/examples/…และหลังจากทำการค้นหาและมีเครื่องหมายปรากฏขึ้นฉันจะหาเครื่องหมาย lat / long ของเครื่องหมายนั้นได้อย่างไร
user1063287

31

คุณก็สามารถโทรgetPosition()ในMarker - มีคุณพยายามที่?

ถ้าคุณอยู่ในเลิก v2 ของ JavaScript API ที่คุณสามารถโทรได้ที่getLatLng()GMarker


ฉันคิดว่าความสับสนของฉันคือเมื่อใดที่จะเรียก getPosition () - เป็นสิ่งที่ฉันต้องเพิ่มในตัวสร้างเพื่อที่จะได้รู้ว่าจะขอพิกัดเมื่อมีการย้ายเครื่องหมาย?
Genadinik

@Genadinik ตัวอย่างที่ฉันเชื่อมโยงในการแก้ไขอาจช่วยได้ แสดงวิธีการแนบ Listener สำหรับลากเหตุการณ์ที่คุณสามารถค้นหาเครื่องหมายสำหรับตำแหน่งและใช้ตามที่คุณต้องการ
no.good.at.coding

อาเจ๋งและถ้าฉันต้องการเก็บพิกัดในเซสชันหรือ db ฉันควรทำผ่านการโทร AJAX หรือไม่ หรือมีวิธีที่ง่ายกว่านี้?
Genadinik

ฉันไม่คิดว่าจะมีอะไรที่ง่ายไปกว่าการโพสต์ Ajax อย่างรวดเร็วพร้อมด้วยรหัสเครื่องหมายและเป็นพิกัดปัจจุบัน :) แต่คุณสามารถพิจารณาการอัปเดตเป็นกลุ่มหรืออย่างน้อยก็รอสักครู่จนกว่าการลากจะเสร็จสิ้นและเห็นว่าผู้ใช้ไม่ได้ เริ่มการลากอีกต่อไปเพื่อที่คุณจะได้ไม่ท่วมเซิร์ฟเวอร์ด้วยคำขอในขณะที่เครื่องหมายกำลังอยู่ในระหว่างการลาก - รอจนกว่าตำแหน่งจะคงที่จึงจะพูดได้ แน่นอนว่าสิ่งนี้ขึ้นอยู่กับว่าคุณสามารถมีสถานะฝั่งเซิร์ฟเวอร์ของคุณได้ไกลแค่ไหนเมื่อเทียบกับสิ่งที่ลูกค้าเห็น
no.good.at.coding

1
getPosition()ส่งคืนวัตถุดังนั้นเพื่อให้ได้ละติจูด / ลองจิจูดโดยเฉพาะคุณจะต้องเรียกlat()และlng()ตามลำดับจากสิ่งนั้น
Jeff Puckett

20

ลองดู

var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'Set lat/lon values for this property',
    draggable: true
});

google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();
});

8
// show the marker position //

console.log( objMarker.position.lat() );
console.log( objMarker.position.lng() );

// create a new point based into marker position //

var deltaLat = 1.002;
var deltaLng = -1.003;

var objPoint = new google.maps.LatLng( 
  parseFloat( objMarker.position.lat() ) + deltaLat, 
  parseFloat( objMarker.position.lng() ) + deltaLng
);

// now center the map using the new point //

objMap.setCenter( objPoint );

2

คุณควรเพิ่ม Listener บนเครื่องหมายและฟังเหตุการณ์ drag หรือ dragend และถามตำแหน่งของเหตุการณ์เมื่อคุณได้รับกิจกรรมนี้

โปรดดูhttp://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Markerสำหรับคำอธิบายของเหตุการณ์ที่เรียกโดยเครื่องหมาย และโปรดดูhttp://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListenerสำหรับวิธีการที่อนุญาตให้เพิ่มผู้ฟังเหตุการณ์


2

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 10,
  center: new google.maps.LatLng(13.103, 80.274),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var myMarker = new google.maps.Marker({
  position: new google.maps.LatLng(18.103, 80.274),
  draggable: true
});

google.maps.event.addListener(myMarker, 'dragend', function(evt) {
  document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt) {
  document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + position.coords.latitude + ' Current Lng: ' + position.coords.longitude + '</p>';
  var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
    draggable: true
  });
  google.maps.event.addListener(myMarker, 'dragend', function(evt) {
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
  });
  google.maps.event.addListener(myMarker, 'dragstart', function(evt) {
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
  });
  map.setCenter(myMarker.position);
  myMarker.setMap(map);
}
getLocation();
#map_canvas {
  width: 980px;
  height: 500px;
}

#current {
  padding-top: 25px;
}
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>

</head>

<body>
  <section>
    <div id='map_canvas'></div>
    <div id="current">
      <p>Marker dropped: Current Lat:18.103 Current Lng:80.274</p>
    </div>
  </section>


</body>

</html>


1
แม้ว่ารหัสนี้อาจตอบคำถามได้ แต่การให้ข้อมูลว่าจะแก้ปัญหาได้อย่างไรและทำไมจึงช่วยเพิ่มมูลค่าในระยะยาวได้
L_J

-3

มีคำตอบมากมายสำหรับคำถามนี้ซึ่งไม่เคยได้ผลสำหรับฉัน (รวมถึงการแนะนำ getPosition () ซึ่งดูเหมือนจะไม่มีวิธีการสำหรับวัตถุเครื่องหมาย) วิธีเดียวที่ใช้ได้ผลสำหรับฉันในแผนที่ V3 คือ (ง่ายๆ):

var lat = marker.lat();
var long = marker.lng();

1
ฉันคิดว่าคุณหมายถึงmarker.position.lat()และmarker.position.lng()
Jeff Puckett

หรือคุณจำเป็นต้องใช้marker.getPosition().lat()และmarker.getPosition().lng()
Sergio Reis

คุณไม่สามารถใช้ "long" เป็นตัวแปร
Dinith
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.