Question

你好，我有一个简单的问题！我想有一个带谷歌地图的标记，我将移动它，坐标（lan，lon）将用Jsfiddle（Javascript）保存在两个varriables中。我找到了一个代码（带有HTML和CSS），但它不是我需要的，因为它有两个标记和它的不同......提前非常感谢你！

https://jsfiddle.net/irinikonsta/ryvpo5ux/

<!DOCTYPE html>
<title>Street View side-by-side</title>

<body>
  <div id="map"></div>
  <div id="pano"></div>
  <div id="floating-panel">
    Origin:
    <input type="text" readonly id="origin"> Destination:
    <input type="text" readonly id="destination">
    <br> Heading:
    <input type="text" readonly id="heading"> degrees
  </div>
  <script>
    var marker1, marker2;
    var poly, geodesicPoly;

    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: {
          lat: 37.983810,
          lng: 23.727539
        }
      });
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(
        document.getElementById('info'));
      marker1 = new google.maps.Marker({
        map: map,
        draggable: true,
        position: {
          lat: 38.017973,
          lng: 23.694077
        }
      });
      marker2 = new google.maps.Marker({
        map: map,
        draggable: true,
        position: {
          lat: 37.990920,
          lng: 23.751755
        }
      });
      var bounds = new google.maps.LatLngBounds(
        marker1.getPosition(), marker2.getPosition());
      map.fitBounds(bounds);
      google.maps.event.addListener(marker1, 'position_changed', update);
      google.maps.event.addListener(marker2, 'position_changed', update);
      poly = new google.maps.Polyline({
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        map: map,
      });
      geodesicPoly = new google.maps.Polyline({
        strokeColor: '#CC0099',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        geodesic: true,
        map: map
      });
      update();
    }

    function update() {
      var path = [marker1.getPosition(), marker2.getPosition()];
      poly.setPath(path);
      geodesicPoly.setPath(path);
      var heading = google.maps.geometry.spherical.computeHeading(path[0],
        path[1]);
      document.getElementById('heading').value = heading;
      document.getElementById('origin').value = path[0].toString();
      document.getElementById('destination').value = path[1].toString();
    }

  </script>
  <script src="https://maps.googleapis.com/maps/api/jskey=AIzaSyBojvE89boyOqT01eKQd-UV_Dc4dpLRpzw&libraries=geometry&callback=initMap" async defer></script>
</body>

Answer 1

你的问题不是那么清楚...... Buuuut ......你需要的是这样的事情http://jsfiddle.net/yorch/z67mxhbu/1/？

将marker，lat和lng保留为全局变量并在必要时存储它们（在这种情况下，我选择了dragend事件，但您可以{{ 3}}）

google.maps.event.addListener(marker, 'dragend', update);

然后在更新方法中做你的魔术，在我的情况下：

function update() {
  var path = marker.getPosition();
  lat = path.lat();
  lng = path.lng()
  alert("Lat: " + lat + "\nLon: " + lng);
}

注意： jsfiddle基于check all events here中http://thinkingstiff.com/的示例

通过Javascript

1 个答案: