带有自定义谷歌地图标记/拖放动画的Javascript

Question

我是 JS 的新手，但我希望自定义地图能够正常工作。我编写了两个渲染地图的脚本：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

您可以在 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,
  }));

我认为会奏效。