Google地图：使用自定义标记显示当前用户的位置

Question

我有以下示例，在Google地图上显示当前用户的位置：http://dev.driz.co.uk/googlemap/

正如你所看到的，我有三件（我已经为演示借了Foursquare图标）：

1。）用户所在的标记

2。）用户的头像（请注意，如果用户登录或未登录，可能会改变，并且有自定义头像或只有神秘人物）

3。）位于头像和标记之上的头像框架。

我想要做的是让头像很好地位于框架内部，或许作为背景图像，如果可能的话？文档中没有看到任何关于此的内容，但框架需要高于头像，因此它会创建圆角遮罩。

而且我还希望它们一起倒下，因为有时框架出现在标记点下面而不是总是应该在顶部。因此，他们需要同时作为一个整体并放弃。

拥有Google Map知识的任何人都能帮助我解决这两个问题吗？感谢

Answer 1

有关整个动画的一些值得注意的事情：

• 标记z-index在动画期间不一致，因为在标记处于最终位置之前它不会被设置，因此在丢弃期间您唯一能够控制的是订购每个标记的 setMap 尽可能最好地使用它们，以便在删除时按顺序堆叠它们。这意味着首先调用最后面一个对象的函数，然后以堆叠顺序继续调用更近的图像。但是，一旦完成动画，它们将始终按照正确的顺序。
• 为了控制 setMap 调用的顺序，您必须唯一地命名存储 Marker 对象。
• 标记不会添加到地图中并在加载之前设置动画，因此最好在代码中创建图像对象并预加载图像，然后将标记动画设置为 {的回调。 {1}} 事件一旦完成就会结束。

即使有了这一切，图像仍然会单独掉落，因此它可能没有您想要的效果，但这可能是让它尽可能接近管理的方式。

设置Z-Index

首先，您可以轻松将标记的z-index设置为传递给 onload 构造函数的MarkerOptions之一：

Marker

设置图标锚定

接下来，要更改您提供给标记的图像的位置， var marker1 = new google.maps.Marker({ animation: google.maps.Animation.DROP, position: pos, map: map, icon: image1, zIndex: 1 }); 对象可以包含MarkerImage作为其 MarkerOptions < / strong>成员，因此请使用此对象指示图标的锚点：

icon

第二个和第三个参数是可选的，如果没有指定，将为你构造，所以我们真的只想为anchor参数提供一个值。

创建图片OnLoad回调

如果您要预加载我强烈推荐的图像，可以通过创建三个图像对象，将OnLoad处理程序绑定到每个对象，然后设置图像的 var image1 = new google.maps.MarkerImage( "http://dl.dropbox.com/u/1597153/00000000000000000000000000000000.png", null, null, new google.maps.Point(16, 49)); < / strong> property- 按此顺序。只有在所有三个图像都已加载后，才能创建用于创建标记并将其添加到地图的代码。

src

我已经提供了我在this Fiddle上演示的技术的工作演示，所以请查看它，希望能让您了解它是如何结合在一起的。