Lấy Lat / Lng từ Google marker

89

Tôi đã tạo một bản đồ Google Maps với một điểm đánh dấu có thể kéo được. Khi người dùng kéo điểm đánh dấu, tôi cần biết vĩ độ và kinh độ mới, nhưng tôi không hiểu cách tiếp cận tốt nhất để làm điều đó là gì.

Làm cách nào để truy xuất tọa độ mới?

javascript  google-maps  google-maps-markers 
— Genadinik
nguồn

Câu trả lời:

132

Đây là bản Demo JSFiddle . Trong Google Maps API V3, việc theo dõi vĩ độ và lng của một điểm đánh dấu có thể kéo khá đơn giản. Hãy bắt đầu với HTML và CSS sau đây làm cơ sở của chúng tôi.

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

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

#current{
     padding-top: 25px;
}

Đây là JavaScript ban đầu của chúng tôi để khởi tạo bản đồ google. Chúng tôi tạo một điểm đánh dấu mà chúng tôi muốn kéo và đặt thuộc tính có thể kéo của nó thành true. Tất nhiên, hãy nhớ rằng nó phải được đính kèm với một sự kiện onload của cửa sổ của bạn để nó được tải, nhưng tôi sẽ bỏ qua mã:

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
});

Ở đây chúng tôi đính kèm hai sự kiện dragstartđể theo dõi thời điểm bắt đầu kéo và kéo dragendkhi điểm đánh dấu ngừng được kéo và cách chúng tôi đính kèm nó để sử dụng google.maps.event.addListener. Những gì chúng tôi đang làm ở đây là thiết lập currentnội dung của div khi điểm đánh dấu được kéo và sau đó đặt vĩ độ và lng của điểm đánh dấu khi quá trình kéo dừng lại. Sự kiện chuột của Google có tên thuộc tính 'latlng' trả về đối tượng 'google.maps.LatLng' khi sự kiện kích hoạt. Vì vậy, những gì chúng tôi đang làm ở đây về cơ bản là sử dụng định danh cho trình nghe này được trả về bởi google.maps.event.addListenervà lấy thuộc tính latLngđể trích xuất vị trí hiện tại của dragend. Khi chúng tôi có được Lat Lng đó khi quá trình kéo dừng lại, chúng tôi sẽ hiển thị trong currentdiv của bạn :

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>';
});

Cuối cùng, chúng tôi sẽ căn giữa điểm đánh dấu của mình và hiển thị nó trên bản đồ:

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

Hãy cho tôi biết nếu bạn có bất kỳ câu hỏi nào liên quan đến câu trả lời của tôi.

— KJYe.Name 葉家仁
nguồn
3
Thật tuyệt vời! Tôi có một bản đồ với trường nhập địa chỉ tự động hoàn thành cũng như một điểm đánh dấu có thể kéo được. Tôi cũng cần hiển thị tọa độ vĩ độ dài nếu ai đó sử dụng trường đầu vào. Có một giải pháp đơn giản cho điều này?
— Kirk Ross
38 
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

Bạn có thể tìm thêm thông tin tại API Google Maps - LatLng

— José David Bedoya
nguồn
làm thế nào để bạn khởi tạo markertrước khi gọi các phương thức trên đó? ví dụ: tôi đang xem Develop.google.com/maps/documentation/javascript/examples/… và sau khi tìm kiếm xong và một điểm đánh dấu xuất hiện, làm cách nào để lấy vĩ độ / độ dài của điểm đánh dấu đó?
— user1063287
31

Bạn chỉ có thể gọi getPosition()vàoMarker - bạn đã thử chưa?

Nếu bạn đang sử dụng phiên bản JavaScript API không dùng nữa, v2, bạn có thể gọi getLatLng()tiếpGMarker .

— no.good.at.coding
nguồn
Tôi nghĩ rằng chỗ nhầm lẫn của tôi là khi nào gọi hàm getPosition () - nó có phải là thứ tôi phải thêm vào hàm tạo để nó biết yêu cầu tọa độ khi điểm đánh dấu được di chuyển không?
— Genadinik
@Genadinik Ví dụ mà tôi đã liên kết đến trong bản chỉnh sửa của mình có thể giúp ích; nó chỉ ra cách đính kèm một trình lắng nghe cho các sự kiện kéo nơi bạn có thể truy vấn điểm đánh dấu cho vị trí của nó và sử dụng nó theo cách bạn muốn.
— no.good.at.coding
Thật tuyệt, và nếu tôi muốn lưu trữ tọa độ trong phiên hoặc db, tôi có nên thực hiện điều đó thông qua lệnh gọi AJAX không? Hay có cách nào đơn giản hơn?
— Genadinik
Tôi không thể nghĩ ra điều gì đơn giản hơn một bài đăng Ajax nhanh với id điểm đánh dấu và đó là tọa độ hiện tại :) Nhưng bạn có thể xem xét cập nhật hàng loạt hoặc ít nhất là đợi một vài giây cho đến khi hoàn thành kéo và thấy rằng người dùng không bắt đầu thêm bất kỳ lệnh kéo nào để bạn không làm ngập máy chủ với các yêu cầu trong khi các điểm đánh dấu đang trong quá trình được kéo - hãy đợi cho đến khi các vị trí ổn định. Tất nhiên, điều này phụ thuộc vào mức độ bạn có thể đủ khả năng để có trạng thái phía máy chủ của mình so với những gì khách hàng nhìn thấy.
— no.good.at.coding
1
getPosition()trả về một đối tượng, vì vậy để có được vĩ độ / kinh độ cụ thể, bạn sẽ phải gọi lat()và lng()tương ứng từ đó.
— Jeff Puckett
20

thử cái này

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();
});
— Rolwin Crasta
nguồn
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 );
— Thiago Mata
nguồn
2

Bạn nên thêm một người nghe trên điểm đánh dấu và lắng nghe sự kiện kéo hoặc sự kiện và hỏi sự kiện vị trí của nó khi bạn nhận được sự kiện này.

Xem http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker để biết mô tả về các sự kiện được kích hoạt bởi điểm đánh dấu. Và xem http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener để biết các phương pháp cho phép thêm trình nghe sự kiện.

— JB Nizet
nguồn
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>
Mở rộng đoạn mã

— Manikandan Ece
nguồn
1
Mặc dù mã này có thể trả lời câu hỏi, nhưng việc cung cấp thông tin về cách thức và lý do nó giải quyết vấn đề sẽ cải thiện giá trị lâu dài của nó.
— L_J
-3

Có rất nhiều câu trả lời cho câu hỏi này, chưa bao giờ phù hợp với tôi (bao gồm cả việc gợi ý hàm getPosition () dường như không phải là một phương thức có sẵn cho các đối tượng đánh dấu). Phương pháp duy nhất phù hợp với tôi trong bản đồ V3 là (đơn giản):

var lat = marker.lat();
var long = marker.lng();
— Pr Shadoko
nguồn
1
Tôi nghĩ ý bạn là marker.position.lat()vàmarker.position.lng()
— Jeff Puckett.
Hoặc bạn cần sử dụng marker.getPosition().lat()vàmarker.getPosition().lng()
— Sergio Reis
bạn không thể sử dụng "long" làm biến
— Dinith
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.