JavaScript與自定義Google地圖標記/放下動畫

Question

我非常新手在JS，但我希望得到一個自定義地圖工作。我從事過兩種渲染地圖的腳本：One with the drop animation (maptest1),one with the custom markers (maptest2)。

單獨，他們都很好，但我似乎無法弄清楚如何實現動畫和自定義標記。我知道drop和addMarker函數正在做動畫maptest1。我試圖將這些函數與我的代碼集成在maptest2中，但似乎無法使其工作。

任何有識之士將不勝感激！

maptest1：（降動畫）

var locations = [ 
    new google.maps.LatLng(47.578033, -122.288116, 1), 
    new google.maps.LatLng(47.675625, -122.304115, 2), 
    new google.maps.LatLng(47.681580, -122.355278, 3) 
]; 
var markers = []; 
var iterator = 0; 
function initialize() { 
    drop(); 
    var mapOptions = { 
    zoom: 12, 
    panControl: false, 
    zoomControl: true, 
    scaleControl: false, 
    streetViewControl: false, 
    overviewMapControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: new google.maps.LatLng(47.63,-122.33), 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
} 
function drop() { 
    for (var i = 0; i < locations.length; i++) { 
    setTimeout(function() { 
     addMarker(); 
    }, i * 200); 
    } 
} 
function addMarker() { 
    markers.push(new google.maps.Marker({ 
    position: locations[iterator], 
    map: map, 
    draggable: false, 
    animation: google.maps.Animation.DROP 
    })); 
    iterator++; 
} 

maptest2：（自定義標記）

function initialize() { 
    var mapOptions = { 
    zoom: 12, 
    panControl: false, 
    zoomControl: true, 
    scaleControl: false, 
    streetViewControl: false, 
    overviewMapControl: false, 
    center: new google.maps.LatLng(47.63,-122.33), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
    setMarkers(map, studios); 
} 
var studios = [ 
    ['Mount Baker', 47.578033, -122.288116, 3], 
    ['Ravenna', 47.675625, -122.304115, 2], 
    ['Phinney', 47.681580, -122.355278, 1] 
]; 

function setMarkers(map, locations) { 
    var image = new google.maps.MarkerImage('mapimages/image.png', 
     new google.maps.Size(30, 52), 
     new google.maps.Point(0,0), 
     new google.maps.Point(15, 52)); 
    var shadow = new google.maps.MarkerImage('mapimages/shadow.png', 
     new google.maps.Size(60, 52), 
     new google.maps.Point(0,0), 
     new google.maps.Point(15, 52)); 
    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 
    for (var i = 0; i < locations.length; i++) { 
    var studio = locations[i]; 
    var myLatLng = new google.maps.LatLng(studio[1], studio[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: studio[0], 
     zIndex: studio[3] 
    }); 
    } 
} 

編輯

If anyone is wondering, using Ryan's additions to the script here it working currently.

Answer 1

你可以添加這裏面addMarker maptest1.html（）

var image = new google.maps.MarkerImage('mapimages/image.png', 
    new google.maps.Size(30, 52), 
    new google.maps.Point(0,0), 
    new google.maps.Point(15, 52)); 
var shadow = new google.maps.MarkerImage('mapimages/shadow.png', 
    new google.maps.Size(60, 52), 
    new google.maps.Point(0,0), 
    new google.maps.Point(15, 52)); 
var shape = { 
    coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
    type: 'poly' 
}; 

並改變這一點：

markers.push(new google.maps.Marker({ 
    position: locations[iterator], 
    map: map, 
    draggable: false, 
    animation: google.maps.Animation.DROP 
    })); 

這樣：

markers.push(new google.maps.Marker({ 
    position: locations[iterator], 
    map: map, 
    draggable: false, 
    animation: google.maps.Animation.DROP, 
    shadow: shadow, 
    icon: image, 
    shape: shape, 
    })); 

我認爲，將工作。