我有以下示例在 Google 地图上显示当前用户位置：http://dev.driz.co.uk/googlemap/
如你所见，我有三个部分（我为演示借用了 Foursquare 图标）：
1.) 用户所在的标记
2.) 用户的头像（请注意，这可能会根据用户是否登录并有自定义头像或只有神秘人而改变）
3.) 位于头像和标记顶部的头像框架。
我想要做的是让头像很好地坐在框架内，或者作为背景图像，如果可能的话？在文档中没有看到任何关于此的内容，但框架需要位于头像上方，以便创建圆角蒙版。
而且我希望它们一起掉下来，因为有时框架会出现在标记点下方，而不是总是在应有的顶部。所以他们需要一体行动，同时掉落。
有谷歌地图知识的人可以帮我解决这两个部分吗？谢谢
【问题讨论】：
就整个动画而言，有几点值得注意：
setMap 尽你所能诱使它们在掉落时按顺序堆叠。这意味着首先调用最后一个对象的函数，然后按堆叠顺序处理更接近的图像。但是，一旦动画完成，它们的顺序总是正确的。setMap 调用的顺序，您必须对存储 Marker 对象的变量进行唯一命名。
即使所有这些都到位，图像仍会单独掉落，因此可能无法完全达到您正在寻找的效果，但这可能是使其尽可能接近的方法。
设置 Z 索引
首先，您可以轻松地将标记的 z-index 设置为您传递给 Marker 构造函数的 MarkerOptions 之一：
var marker1 = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: pos,
map: map,
icon: image1,
zIndex: 1
});
设置图标锚定
接下来，要更改您提供给标记的图像的位置，MarkerOptions 对象可以包含 MarkerImage 作为其 icon 成员，所以使用此对象来指示图标的锚点：
var image1 = new google.maps.MarkerImage(
"http://dl.dropbox.com/u/1597153/00000000000000000000000000000000.png",
null,
null,
new google.maps.Point(16, 49));
第二个和第三个参数是可选的，如果没有指定，将为您构造，所以我们真的只对提供锚参数的值感兴趣。
创建图像 OnLoad 回调
如果您要预加载图像，我强烈建议您这样做，方法是创建三个图像对象，将 OnLoad 处理程序绑定到每个对象，然后设置图像的 src 属性—按此顺序。您创建标记并将它们添加到地图的代码应该只在所有三个图像都加载后发生。
// Create image objects to force pre-loading
var domImg1 = new Image(),
domImg2 = new Image(),
domImg3 = new Image();
// Instantiate variables for iteration
var images = [domImg1, domImg2, domImg3],
j = 0;
// Bind an OnLoad handler that checks to see if all three images have been pre-loaded
for (i in images) {
images[i].onload = function() {
if (++j == 3) {
// Create markers and add to map here
}
}
}
// Set the src property to start the download and trigger the onload events
domImg1.src = "http://dl.dropbox.com/u/1597153/00000000000000000000000000000000.png";
domImg2.src = "http://dl.dropbox.com/u/1597153/pin-white.png";
domImg3.src = "http://dl.dropbox.com/u/1597153/marker.png";
我在this Fiddle 上提供了我在此处演示的技术的工作演示，因此请查看它，希望它能让您了解它是如何组合在一起的。
【讨论】：