Question

我一直在尝试添加一个逻辑，当你开始在标记周围拖动地图时，它将停留在地图的中心，然后返回新位置的lat和lng。请看看我所做过的Plunker谢谢 Plunker

var location = {lat: -33.8830, lng: 151.2166};

var mainMarker = {
            lat: location.lat,
            lng: location.lng,
            focus: true,
            draggable: false
    };

  var vm = angular.extend(this, {
        center: {
            lat: location.lat,
            lng: location.lng,
            zoom: 17
        },
        markers: {
            mainMarker: angular.copy(mainMarker)
        },
        defaults: {
            zoomControl: false
        },
        tiles: {
            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        }
    });

Answer 1

您可以在移动标记后在标记上使用一个事件，甚至在地图上使用另一个事件，以便在每次移动地图时将标记设置在地图的中心。看看：

const lat = 38.736946
const lon = -9.142685

var map = L.map('mapid').setView([lat, lon], 10)

// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  { subdomains: ['a', 'b', 'c'] })
  .addTo(map)
  
var marker = L.marker([lat, lon],{
  draggable: true,
  autoPan: true
}).addTo(map);
  
map.on("moveend", function () {
  marker.setLatLng(map.getCenter())
})

marker.on("move", function (obj) {
  const newCoord = obj.latlng
  console.log('New coordinates ' + newCoord)
})

.map { 
  height: 280px; 
  z-index: 1;
}

.map-container {
  position: relative;
  width: 300px;
  height: 300px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> 
 
<div class="map-container">
  <div class="map-marker-centered"></div>
  <div id="mapid" class="map"></div>
</div>

Answer 2

当地图移动时，标记位置可以更新（位于地图的中心位置）：

$scope.$on('leafletDirectiveMap.drag', function(event,args){  
       //get the Leaflet map from the triggered event.
       var map = args.leafletEvent.target;
       var center = map.getCenter();  //get map center

       //update(recenter) marker
       $scope.vm.markers.mainMarker.lat = center.lat;
       $scope.vm.markers.mainMarker.lng = center.lng;
});

Updated plunker

中心传单总是在地图移动时

2 个答案: