Google मार्कर से Lat / Lng प्राप्त करना

Question

मैंने एक ड्रैगबल मार्कर के साथ एक Google मैप्स मैप बनाया। जब उपयोगकर्ता मार्कर खो देता है, तो मुझे नए अक्षांश और देशांतर को जानने की आवश्यकता है, लेकिन मुझे समझ नहीं आता कि ऐसा करने के लिए सबसे अच्छा तरीका क्या है।

मैं नए निर्देशांक कैसे प्राप्त कर सकता हूं?

Answer 1

यहाँ JSFiddle डेमो है । Google Maps API V3 में एक ड्रैगबल मार्कर के लेट और लैंग को ट्रैक करना बहुत सरल है। चलिए हमारे आधार के रूप में निम्नलिखित HTML और CSS से शुरू करते हैं।

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

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

#current{
     padding-top: 25px;
}

यहाँ हमारा प्रारंभिक जावास्क्रिप्ट गूगल मैप को इनिशियलाइज़ कर रहा है। हम एक मार्कर बनाते हैं जिसे हम ड्रैग करना चाहते हैं और इसे ड्रैग करने योग्य प्रॉपर्टी को सही पर सेट करना है। निश्चित रूप से यह ध्यान रखें कि इसे लोड करने के लिए आपकी विंडो की ऑनलोड घटना से जुड़ा होना चाहिए, लेकिन मैं कोड पर छोड़ दूंगा:

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जोड़ते हैं और जब मार्कर को ड्रैग करना बंद कर देते हैं, और जिस तरह से हम इसे जोड़ते हैं उसका उपयोग करना है google.maps.event.addListener। हम यहाँ क्या कर रहे हैं currentजब div ड्रैग कर रहा है तब मार्कर सेट हो रहा है और फिर मार्कर के लेट और lng को सेट करें जब ड्रैग रूक जाता है। Google माउस इवेंट में एक प्रॉपर्टी का नाम 'latlng' होता है, जो इवेंट ट्रिगर होने पर 'google.maps.LatLng' ऑब्जेक्ट देता है। इसलिए, हम यहां जो कर रहे हैं वह मूल रूप से इस श्रोता के लिए पहचानकर्ता का उपयोग कर रहा है जो ड्रैगेंड की वर्तमान स्थिति को निकालने के google.maps.event.addListenerलिए संपत्ति प्राप्त करता है और प्राप्त करता है latLng। एक बार जब हम ड्रैग लैंग को खींच लेते हैं, तो हम आपके currentडिव के भीतर प्रदर्शित होते हैं :

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

अगर आपको मेरे उत्तर के बारे में कोई प्रश्न है तो मुझे बताएं।

Comments

यह उत्कृष्ट है! मेरे पास एक ऑटो-पूरा पता इनपुट क्षेत्र के साथ-साथ एक ड्रैगेबल मार्कर के साथ एक नक्शा है। अगर किसी ने इनपुट क्षेत्र का उपयोग किया है तो मुझे भी लंबे समय तक निर्देशांक प्रदर्शित करने की आवश्यकता है। क्या इसका कोई सरल उपाय है?

— कर्क रॉस

Answer 2

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

अधिक जानकारी Google मैप्स API - LatLng पर मिल सकती है

Comments

markerउस पर कॉल करने के तरीकों से पहले आप कैसे पलटा लेते हैं ? उदाहरण के लिए, मैं डेवलपर्स देख रहा हूं। http://www.maps/documentation/javascript/examples/… और एक खोज किए जाने के बाद और एक मार्कर दिखाई देता है, मैं उस मार्कर के अक्षांश / लंबे समय को कैसे प्राप्त करूं?

— user1063287

Answer 3

आप बस getPosition()परMarker कॉल कर सकते हैं - क्या आपने कोशिश की है?

आप पदावनत, जावास्क्रिप्ट एपीआई के वी 2 पर हैं, तो आप कॉल कर सकते हैं getLatLng()परGMarker ।

Comments

मुझे लगता है कि गेटपॉइंट कॉल करने के लिए मेरा भ्रम कहां है () - क्या यह कुछ है जिसे मुझे कंस्ट्रक्टर से जोड़ना है ताकि यह मार्कर के स्थानांतरित होने पर निर्देशांक के लिए पूछना जानता हो?

— Genadinik

@Gadadinik मेरे द्वारा संपादित किए गए उदाहरण से मेरी मदद हो सकती है; यह दिखाता है कि ड्रैग ईवेंट के लिए एक श्रोता को कैसे संलग्न करें जहां आप मार्कर को स्थिति के लिए क्वेरी कर सकते हैं और इसका उपयोग कर सकते हैं, हालांकि आप इसे पसंद करेंगे।

— no.good.at.coding 15:13

आह शांत, और अगर मैं सत्र या डीबी में निर्देशांक संग्रहीत करना चाहता हूं, तो क्या मुझे AJAX कॉल के माध्यम से करना चाहिए? या एक सरल तरीका है?

— Genadinik

मैं मार्कर आईडी के साथ एक त्वरित अजाक्स पोस्ट की तुलना में कुछ भी आसान नहीं सोच सकता हूं और यह वर्तमान निर्देशांक है :) लेकिन आप बैचिंग अपडेट पर विचार कर सकते हैं या कम से कम कुछ सेकंड इंतजार कर सकते हैं जब तक कि ड्रैग पूरा न हो जाए और यह देखते हुए कि उपयोगकर्ता नहीं करता है किसी भी अधिक ड्रग्स को शुरू करें ताकि आप सर्वर को अनुरोधों के साथ नहीं भर सकें जबकि मार्करों को घसीटा जाने की प्रक्रिया में है - जब तक स्थिति स्थिर न हो, तब तक प्रतीक्षा करें। यह निश्चित रूप से इस बात पर निर्भर करता है कि क्लाइंट क्या देखता है, उसकी तुलना में आप अपने सर्वर-साइड राज्य को कितना पीछे रख सकते हैं।

— no.good.at.coding

getPosition()एक वस्तु लौटाता है, इसलिए विशेष रूप से अक्षांश / देशांतर प्राप्त करने के लिए, आपको कॉल करना होगा lat()और lng()उसी से क्रमशः।

— जेफ

Answer 4

इसे इस्तेमाल करे

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

Answer 5

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

Answer 6

आपको मार्कर पर एक श्रोता को जोड़ना चाहिए और ड्रैग या ड्रैगेंड ईवेंट के लिए सुनना चाहिए, और जब आप इस ईवेंट को प्राप्त करते हैं, तो उसकी स्थिति पूछें।

मार्कर द्वारा ट्रिगर की गई घटनाओं के विवरण के लिए 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 देखें ।

Answer 7

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>

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन समस्या को हल करने के तरीके के बारे में जानकारी प्रदान करता है और इसके दीर्घकालिक मूल्य में सुधार करता है।

— L_J

Answer 8

इस सवाल के बहुत सारे उत्तर हैं, जिन्होंने कभी मेरे लिए काम नहीं किया (जिसमें सुझाव getPosition () शामिल है जो मार्कर ऑब्जेक्ट्स के लिए उपलब्ध विधि नहीं है)। एकमात्र तरीका जो मेरे लिए V3 के नक्शे में काम करता है (बस):

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

Comments

मुझे लगता है कि आप मतलब है marker.position.lat()औरmarker.position.lng()

— जेफ पकेट

या आपको उपयोग करने की आवश्यकता है marker.getPosition().lat()औरmarker.getPosition().lng()

— सर्जियो रीस

आप एक चर के रूप में "लंबे समय" का उपयोग नहीं कर सकते

— Dinith