如何更改点击事件上的标记位置？ [复制]答案

【问题标题】：How can change marker position on the click event? [duplicate]如何更改点击事件上的标记位置？ [复制]
【发布时间】：2021-07-08 12:23:25
【问题描述】：

我想将点击事件上的标记位置更改为用户在地图上点击的位置，但我的脚本似乎不起作用。

这是我在控制台上遇到的错误。 InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

这是我的脚本：

                <script>
                let map;
                function initMap() {
                    map = new google.maps.Map(document.getElementById("map"), {
                        center: { lat: -34.397, lng: 150.644 },
                        zoom: 8,
                    });

                    const uluru = { lat: -34.397, lng: 150.644 };
                    let marker = new google.maps.Marker({
                        position: uluru,
                        map: map,
                        draggable: true
                    });

                    google.maps.event.addListener(map,'click',
                        function (event){
                            moveMarker({position:event.latLng});
                        }
                    )
                    
                    function moveMarker(props){
                        marker.setPosition(props)
                    }
                }
            </script>

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

您的代码中有拼写错误。 marker.setPosition 方法将 google.maps.LatLng 或 google.maps.LatLngLiteral 对象作为其参数。你也没有传递，你提供了一个带有 position 属性的匿名 javascript 对象。

要么将您的 moveMarker 函数更改为：

function moveMarker(props) {
  marker.setPosition(props.position)
}

proof of concept fiddle

或从对它的调用中删除匿名对象的创建：

google.maps.event.addListener(map,'click',
    function (event){
        moveMarker(event.latLng);
    }
)

代码 sn-p：

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8,
  });

  const uluru = {
    lat: -34.397,
    lng: 150.644
  };
  let marker = new google.maps.Marker({
    position: uluru,
    map: map,
    draggable: true
  });

  google.maps.event.addListener(map, 'click',
    function(event) {
      moveMarker({
        position: event.latLng
      });
    }
  )

  function moveMarker(props) {
    marker.setPosition(props.position)
  }
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script>
</body>

</html>

【讨论】：