标记动画放回回 [英] Marker animation drop callback

问题描述

我使用google地图，我有这个 _marker（）函数。我目前使用 setTimeout 6秒来延迟回调，以便它在标记被删除后运行。我一直在文档中查找，并尝试像 gmaps.event.addListenerOnce（marker，'idle'，function（... 没有运气）有人知道

I'm working with google maps, I have this _marker() function. I am currently using a setTimeout with 6 seconds to delay the callback so that it runs after the marker has been dropped. I've been looking in the documentation and tried something like gmaps.event.addListenerOnce(marker, 'idle', function(... with no luck. Does anyone know of a marker animation-drop event so I can legitimize this callback?

var _marker = function(place, map, callback){
    var marker = new gmaps.Marker({
        clickable: false,
        draggable: false,
        position: new gmaps.LatLng(place.latitude, place.longitude),
        map: map,
        animation: gmaps.Animation.DROP,
        icon: new gmaps.MarkerImage(
            'http://maps.google.com/mapfiles/ms/micons/red-dot.png',
            new gmaps.Size(32, 32),
            new gmaps.Point(0,0),
            new gmaps.Point(16, 32)
        )
    });
    if(typeof callback !== "undefined"){
        setTimeout(function(){
            return callback(marker);
        }, 600);
    }else{
        return marker;
    }
}

推荐答案

一个delayMarker函数的工作原理与原来的一样，除非有一个方法允许你创建一个标记而不显示它，然后显示和动画它，我不知道是否有一个更好的方法。

Here's a delayMarker function kind of works the same way as the original one, unless there's a method that allows you to create a marker without showing it, then show and animate it, I'm not sure if there's a better way.

在JSBIN上演示

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var googleMapsIcon = new google.maps.MarkerImage(
    'http://maps.google.com/mapfiles/ms/micons/red-dot.png',
    new google.maps.Size(32, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(16, 32)
  )

  function delayMarker ({place = {}, position, map, timeout}, callback) {

    var marker = {
      clickable: false,
      draggable: false,
      position: new google.maps.LatLng(position.lat, position.lng),
      map: map,
      animation: google.maps.Animation.DROP,
      icon: googleMapsIcon
    }

    if (timeout && callback) {
      return setTimeout(function(){
        return callback(new google.maps.Marker(marker))
      }, timeout)  
    } else {
      return marker  
    }
  }

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: myLatLng,
    scrollwheel: false,
    zoom: 4
  })

  var marker = delayMarker({
    map: map,
    position: myLatLng,
    timeout: 2000,
  }, () => {
    console.log('done')
  })

} 

这篇关于标记动画放回回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！