标记动画放置回调答案

【问题标题】：Marker animation drop callback标记动画放置回调
【发布时间】：2013-05-02 03:13:41
【问题描述】：

我正在使用谷歌地图，我有这个_marker() 功能。我目前正在使用setTimeout 6 秒来延迟回调，以便它在标记被删除后运行。我一直在查看文档并尝试了类似gmaps.event.addListenerOnce(marker, 'idle', function(... 的方法，但没有成功。有谁知道标记动画放置事件，所以我可以使这个回调合法化？

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

【问题讨论】：

如何放下记号笔？通过点击地图？如果是这样，回调应该在点击事件之后而不是在动画事件之后。
地图加载时标记会掉落&$(document).ready()

标签： javascript google-maps events callback

【解决方案1】：

这是一个 delayMarker 函数的工作方式与原始函数相同，除非有一种方法允许您创建标记而不显示它，然后显示和动画它，我不确定是否有更好的方法。

Demo on 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')
  })

}

【讨论】：