我试图动画我的Google地图标记。我设法为我的地图设置样式，设置自定义标记并使动画正常工作，但有一些事情阻止它以我想要的方式工作。
首先，我使用pace.js为页面添加加载栏。加载页面后，CSS会通过基本的CSS过渡将内容淡入视图。由于此转换的持续时间为0.5秒，因此动画将在页面完全加载之前运行。所以基本上我需要一种为地图标记动画添加延迟的方法。
中学，我想把我的地图放在网站的页脚附近。这意味着没有人会看到动画。我认为如果地图在视图中（并加载页面）它只会动画，那就太好了。
有没有办法实现这个目标？
这是我目前的代码：
/*
* When the window has finished loading create our google map below.
*/
google.maps.event.addDomListener(window, 'load', init);
/*
* Basic options for a simple Google Map. For more options see:
* https://developers.google.com/maps/documentation/javascript/reference#MapOptions
*
* 1. How zoomed in you want the map to start at (always required)
* 2. The latitude and longitude to center the map (always required).
* 3. How you would like to style the map. This is where you would paste any
* style found on Snazzy Maps.
* 4. Prevent map from being draggable.
* 5. Hide map/satellite toggle.
* 6. Hide "Street View" button.
*/
function init() {
var mapOptions = {
zoom: 15, /* [1] */
center: new google.maps.LatLng(LATVALUE, LONGVALUE), /* [2] */
draggable: false, /* [4] */
mapTypeControl: false, /* [5] */
streetViewControl: false, /* [6] */
styles: /* [3] */
[{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"all","elementType":"geometry.fill","stylers":[{"weight":"2.00"}]},{"featureType":"all","elementType":"geometry.stroke","stylers":[{"color":"#9c9c9c"}]},{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#eeeeee"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#7b7b7b"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"fill","stylers":[{"weight":"1.00"}]},{"featureType":"transit","elementType":"labels.icon","stylers":[{"visibility":"on"},{"hue":"#a3cd39"},{"gamma":1},{"saturation":"50"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#c8d7d4"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#070707"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]}]
};
/*
* Get the HTML DOM element that will contain your map. We are using a div with
* id="map" seen below in the <body>
*/
var mapElement = document.getElementById('map');
/*
* Create the Google Map using our element and options defined above.
*
* 1. Map varible.
* 2. Marker variable so we can specify a retina image and resize.
*/
var map = new google.maps.Map(mapElement, mapOptions); /* [1] */
var mapIcon = new google.maps.MarkerImage("img/interface/map-marker@2x.png", null, null, null, new google.maps.Size(100,78)); /* [2] */
/*
* Let's also add a marker while we're at it.
*/
var marker = new google.maps.Marker({
position: new google.maps.LatLng(LATVALUE, LONGVALUE),
map: map,
flat: true,
title: 'COMPANY NAME',
icon: mapIcon,
animation: google.maps.Animation.DROP
});
}
感谢您花时间阅读，希望有人可以帮助我！ ：）
答案 0 :(得分：1)
看看this answer。使用Waypoints，您可以在页脚进入视图时触发功能。触发后的函数将选择标记并为其添加一个包含css转换的类。
var waypoint = new Waypoint({
element: $([selector for footer]),
handler: function() {
$([selector for marker]).addClass([class containing css transition]);
}
});
元素告诉Waypoints滚动期间DOM元素的位置要观察，处理程序是当该元素的顶部击中时触发的函数视口顶部。