Javascript：从点击和拖动地图标记获取坐标 [英] Javascript: Get Coords from both clicking and dragging map marker

问题描述

我有下面的脚本，其中当地图被点击时放置google地图标记。然后可以拖动它以获得更高的精度。

  map.addListener（'click'，function（e）我想在任何情况下获得地图引脚的坐标。 ）{
 placeMarkerAndPanTo（e.latLng，map）; 
}）; 
 
函数placeMarkerAndPanTo（latLng，map）{
 var position = latLng; 
 console.log（position）; 
 while（markersArray.length）{
 markersArray.pop（）。setMap（null）; 
} 
 var marker = new google.maps.Marker（{
 draggable：true，
 position：latLng，
 map：map，
 title： 选择你的位置！
}）; 
 map.panTo（latLng）; 
 
 markersArray.push（marker）; 
 
 map.addListener（marker，'dragend'，function（event）{
 var position = event.latLng; 
 console.log（position）; 
} ）; 
} 
  

我可以很容易地获得点击协调，但我无法将我的'dragend'监听器，以便它可以检测到该操作。如果它放在 placeMarkerAndPanTo 函数中，那么在函数结束后它并不真正'侦听'。但是，如果我将它放在函数之外，那么它不知道 marker 是什么！

这个问题最简单的解决方法是什么？ 在你的代码中有一个错字：

  markersArray.push（marker）; 
 
 map.addListener（marker，'dragend'，function（event）{
 var position = event.latLng; 
 console.log（position）; 
} ）; 
  

应该是：

  markersArray.push（标记）; 
 
 google.maps.event.addListener（marker，'dragend'，function（event）{
 var position = event.latLng; 
 console.log（position）; 
}）; 
  

概念证明小提琴

代码段：

  var geocoder; var map; var markersArray = []; function placeMarkerAndPanTo（latLng，map）{var position = latLng;的console.log（位置）; while（markersArray.length）{markersArray.pop（）。setMap（null）; } var marker = new google.maps.Marker（{draggable：true，position：latLng，map：map，title：Select Your Location！}）; map.panTo（的latLng）; markersArray.push（标记）; google.maps.event.addListener（marker，'dragend'，function（event）{var position = event.latLng; console.log（position）;}）;} function initialize（）{var map = new google.maps。地图（document.getElementById（map_canvas），{center：new google.maps.LatLng（37.4419，-122.1419），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}）; map.addListener（'click'，function（e）{placeMarkerAndPanTo（e.latLng，map）;}）;} google.maps.event.addDomListener（window，load，initialize）;  
  html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//   

I have the below script in which a google map marker is placed when the map is clicked. It can then be dragged around for further precision. I would like to obtain the coordinates of the map pin in either case.

map.addListener('click', function (e) {
    placeMarkerAndPanTo(e.latLng, map);
});

function placeMarkerAndPanTo(latLng, map) {
    var position = latLng;
    console.log(position);
    while (markersArray.length) {
        markersArray.pop().setMap(null);
    }
    var marker = new google.maps.Marker({
        draggable: true,
        position: latLng,
        map: map,
        title: "Select Your Location!"
    });
    map.panTo(latLng);

    markersArray.push(marker);

    map.addListener(marker, 'dragend', function (event) {
    var position = event.latLng;
    console.log(position);
    });
}

I get the click coords just fine, but I'm having trouble placing my 'dragend' listener so that it picks up on the action. If it is placed inside the placeMarkerAndPanTo function, then it doesn't really 'listen' after the function is over. However, if I place it outside the function, then it has no idea what a marker is!

What is the simplest solution to this problem?

解决方案

You have a typo in your code:

markersArray.push(marker);

map.addListener(marker, 'dragend', function (event) {
var position = event.latLng;
console.log(position);
});

should be:

markersArray.push(marker);

google.maps.event.addListener(marker, 'dragend', function (event) {
var position = event.latLng;
console.log(position);
});

proof of concept fiddle

code snippet:

var geocoder;
var map;
var markersArray = [];

function placeMarkerAndPanTo(latLng, map) {
  var position = latLng;
  console.log(position);
  while (markersArray.length) {
    markersArray.pop().setMap(null);
  }
  var marker = new google.maps.Marker({
    draggable: true,
    position: latLng,
    map: map,
    title: "Select Your Location!"
  });
  map.panTo(latLng);

  markersArray.push(marker);

  google.maps.event.addListener(marker, 'dragend', function(event) {
    var position = event.latLng;
    console.log(position);
  });
}

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  map.addListener('click', function(e) {
    placeMarkerAndPanTo(e.latLng, map);
  });

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

这篇关于Javascript：从点击和拖动地图标记获取坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！