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

Question

嗨我在节点添加表单上使用自定义地图.我的标记使用lat和log设置为我当前的位置.现在我想,每当用户拖动或移动地图时,标记应该在中心(固定).我尝试过很多东西:

$ 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("leafletDirectiveMap.moveend", function(event, args){
        Util.getAddressOf(args.lat, args.l                                                                                                       bng).then(function(location) {
            $rootScope.locationresults = location[0].formatted_address;
            console.log(location);
        }, function(error) {
            console.error(error);
        });
    });*/


    $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);
});

Answer 1

您可以放置​​一个假标记,在地图顶部放置一个带有背景图像的div,并将其放置在绝对位置并始终指向地图的中心.

例:

CSS:

.map-container{
  position: relative;
  width: 300px;
  height: 400px;
}
.map-marker-centered{
  background-image: url(/img/marker.png) no-repeat;
  width: 50px;
  height: 60px;
  position: absolute;
  z-index: 2;
  left: calc(50% - 25px);
  top: calc(50% - 60px);
  transition: all 0.4s ease;
}

HTML:

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

结果: