用户拖动地图后如何修复leaflet地图中心标记？

Question

用户拖动地图后如何修复leaflet地图中心标记？

5

我正在使用自定义地图在我的节点添加表单上。我的标记是使用经纬度设置为我的当前位置。现在，每当用户拖动或移动地图时，我希望标记始终在中心位置（固定）。我尝试了许多方法，例如：

$cordovaGeolocation.getCurrentPosition(options).then(function(position) {
    $scope.latlong = position.coords.latitude + "," + position.coords.longitude;
    $rootScope.lati= position.coords.latitude ;
    $rootScope.long = position.coords.longitude;

    $scope.map.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
        zoom: 20
    };

    $scope.map.markers.now = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
        message: "Usted esta aqui!",
        draggable: false,
        focus: true
    };

    if ($rootScope.locationresults == undefined) {
        Util.getAddressOf(position.coords.latitude, position.coords.longitude).then(function(location) {
            $rootScope.locationresults = location[0].formatted_address;
            console.log(location);
        }, function(error) {
            console.error(error);
        });
    }

    $scope.$on("leafletDirectiveMap.move", function(event, args) {
        $scope.map.markers.now.setLatLng([0,0]).update();
        //$scope.map.markers.now.lat = $scope.map.center.lat;
        //$scope.map.markers.now.lng = $scope.map.center.lng;
        console.info(JSON.stringify($scope.map.markers.now));
    });

    $scope.$on("leafletDirectiveMap.drag", function(event, args){
        console.log(JSON.stringify($scope.map.center));
        //$scope.map.markers.now.setLatLng(0,0);
        $scope.map.markers.now.lat = $scope.map.center.lat;
        $scope.map.markers.now.lng = $scope.map.center.lng;

    });

    $scope.$on("leafletDirectiveMarker.dragend", function(event, args) {
        console.log("moviendo");
        $rootScope.lati= args.model.lat ;
        $rootScope.long = args.model.lng;
        Util.getAddressOf(args.model.lat, args.model.lng).then(function(location) {
            $rootScope.locationresults = location[0].formatted_address;
            $scope.latlong = args.model.lat + "," + args.model.lng;
            console.log(location);
        }, function(error) {
            console.error(error);
        });
    });
}, function(error) {
    console.log(error);
});

- Mishu Lojan

你可能会对Leaflet.MapCenterCoord插件，Leaflet.FeatureSelect插件感兴趣，或者也可以查看其他的选择插件。 - ghybs

2个回答

1

你可以在地图的中心放置一个由背景图片组成的“假”标记。你还可以检测地图移动并获取标记指向的坐标。运行代码片段：

var mymap = L.map('mapid').setView([51.505, -0.09], 13)

// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  { subdomains: ['a', 'b', 'c'] })
  .addTo(mymap)
  
mymap.on("moveend", function () {
  console.log(mymap.getCenter().toString());
});

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

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

.map-marker-centered {
  background-image: url("https://img.icons8.com/color/48/000000/marker--v1.png");
  width: 50px;
  height: 48px;
  position: absolute;
  z-index: 2;
  left: calc(50% - 25px);
  top: calc(50% - 50px);
  transition: all 0.4s ease;
}

<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>

- João Pimentel Ferreira

它可以工作，谢谢！但是纬度略有不正确。 - Paolo Benvenuto

@PaoloBenvenuto 如果它有效，请点赞 :) 您只需要进行一些调整来更正值。 - João Pimentel Ferreira

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- manzapanza · Accepted Answer

你可以放置一个假标记，即在地图上放置一个带有背景图像的div，并使用绝对定位将其放置在地图顶部，并始终指向地图中心。

示例：

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

.map-marker-centered{
  background-image: url('https://img.icons8.com/color/48/000000/marker--v1.png') no-repeat;
  width: 50px;
  height: 60px;
  position: absolute;
  z-index: 20;
  left: calc(50% - 25px);
  top: calc(50% - 60px);
  transition: all 0.4s ease;
}

<div class="map-container">
  <div class="map-marker-centered"></div>
  <div class="map"></div>
</div>

结果：

（注：此段为翻译内容，不包含格式要求）