带有自定义 Google map 标记/放置动画的 Javascript

Question

我是 JS 的新手，但我希望能够使用自定义 map 。我使用了两个渲染 map 的脚本:One with the drop animation (maptest1) , one with the custom markers (maptest2) .

就个人而言，它们都很好用，但我似乎无法弄清楚如何实现动画和自定义标记。我知道 drop 和 addMarker 函数正在执行 maptest1 中的动画。 .我尝试将这些功能与我的代码集成在 maptest2 中，但我似乎无法让它发挥作用。

任何见解将不胜感激!

ma​​ptest1:(放置动画)

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

ma​​ptest2:(自定义标记)

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

您可以将其添加到 maptest1.html 内的 addMarker()

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

我认为会起作用。