中央传单标记总是在地图移动时

Question

我一直在尝试添加一个逻辑，当您开始围绕标记拖动地图时，标记将停留在地图的中心，然后 return 新位置的纬度和经度。请查看我所做工作的 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

当地图像这样移动时，标记位置可以更新（以地图为中心）：

$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

Answer 2

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

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>

中央传单标记总是在地图移动时

Central leaflet marker always when map moves

leaflet

angular-leaflet-directive