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

我是JS的新手，但我希望能有一个自定义地图。我使用了两个脚本渲染地图：

就个人而言，它们都工作得很好，但我似乎不知道如何实现动画和自定义标记。我知道

drop

和

addMarker

函数正在中执行动画。我曾尝试将这些函数与中的代码集成在一起，但似乎无法使其正常工作

任何见解都将不胜感激

maptest1:（拖放动画）

var位置=[
新google.maps.LatLng（47.578033，-122.288116,1），
新google.maps.LatLng（47.675625，-122.304115,2），
新google.maps.LatLng（47.681580，-122.355278,3）
];
var标记=[]；
var迭代器=0；
函数初始化（）{
下降（）；
变量映射选项={
缩放：12，
泛控制：错误，
动物控制：对，
scaleControl:false，
街景控制：错误，
overviewMapControl:错误，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：新谷歌地图拉特林（47.63，-122.33），
};
map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
}
函数drop（）{
对于（变量i=0；i

maptest2:（自定义标记）

函数初始化（）{
变量映射选项={
缩放：12，
泛控制：错误，
动物控制：对，
scaleControl:false，
街景控制：错误，
overviewMapControl:错误，
中心：新谷歌地图拉特林（47.63，-122.33），
mapTypeId:google.maps.mapTypeId.ROADMAP，
}
var map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
设置标记（地图、工作室）；
}
变量=[
[Mount Baker'，47.578033，-122.288116,3]，
[Ravenna'，47.675625，-122.304115,2]，
[Phinney'，47.681580，-122.355278，1]
];
功能设置标记（地图、位置）{
var image=new google.maps.MarkerImage（'mapimages/image.png'，
新谷歌地图大小（30,52），
新google.maps.Point（0,0），
新的google.maps.Point（15,52））；
var shadow=new google.maps.MarkerImage（'mapimages/shadow.png'，
新谷歌地图大小（60,52），
新google.maps.Point（0,0），
新的google.maps.Point（15,52））；
变量形状={
坐标：[1,1,1,20,18,20,18,1]，
类型：“poly”
};
对于（变量i=0；i

编辑

---

您可以将其添加到addMarker（）中的maptest1.html中

改变这一点：

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

---

我想这样行。

谢谢，行了！你太棒了。我花了两个小时想弄明白！没问题，有时需要第二双眼睛才能弄明白：）shape:shape后面的最后一个逗号是多余的，可能会导致IE呕吐。@Ryan我非常感谢您的输入和提供的完美解决方案。我对OP进行了后续更新。我不想在这里滥用你的慷慨，所以不要施加压力。@AndrewR:提出一个新问题，我宁愿把问题分开，这样以后阅读的人就不会感到困惑了。

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