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

Question

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

如您所见，我有三件作品(我已经为演示借用了Foursquare图标)：

1.)用户所在的标记。

2.)用户的化身(请注意，如果用户登录或不登录，并且有一个自定义的化身或只有神秘人，这可能会改变依赖关系)

3.)位于头像和标志顶部的头像框架。

，我想要做的是使它，使化身很好地坐在框架内，也许作为背景图像，如果这是可能的？没有在文档中看到关于这一点的任何内容，但是框架必须在头像上方，因此它创建了圆角掩码。。

和我也希望他们一起下降，因为有时框架出现在标记点之下，而不是总是在顶部，因为它应该是。因此，他们需要作为一个整体，同时下降。。

有谷歌地图知识的人能帮我解决这两个问题吗？谢谢

Answer 1

关于整个动画，有几件事情值得注意：

• 标记z-索引在动画期间是不一致的，因为它是不设置的，直到标记到它的最后位置，所以你真正能做的唯一的事情来控制在下降期间是命令你对每个标记的setMap函数的调用，你能最好地引导它们在放下的时候按顺序堆叠。这意味着首先调用最后面的对象的函数，然后按照堆叠顺序处理更接近的图像。然而，一旦动画完成，它们将始终保持正确的顺序。
• 为了控制setMap调用的顺序，您必须唯一地命名存储Marker对象的变量。
• 标记在加载之前不会添加到地图和动画中，所以最好在代码中创建图像对象并预加载图像，然后将标记动画设置为onload事件的回调。

即使有了所有这些，图像仍然会单独下降，所以它可能没有你想要的效果，但这可能是尽可能接近它的方法。

设置Z-索引

首先，标记的z索引可以很容易地设置为传递给Marker构造函数的MarkerOptions之一：

var marker1 = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    position: pos,
    map: map,
    icon: image1,
    zIndex: 1
});

设置图标锚定

接下来，要更改提供给标记的图像的位置，MarkerOptions对象可以包含作为其icon成员的MarkerImage，因此使用该对象指示图标的锚点：

var image1 = new google.maps.MarkerImage(
    "http://dl.dropbox.com/u/1597153/00000000000000000000000000000000.png",
    null,
    null,
    new google.maps.Point(16, 49));

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

创建图像OnLoad回调

如果要预加载图像，我强烈建议这样做，方法是创建三个映像对象，将一个OnLoad处理程序绑定到每个对象，然后按照顺序设置图像的属性。创建标记并将其添加到地图的代码只应在加载了所有三个图像之后才会发生。

// 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上演示的技术的一个工作演示，所以请检查它，希望它能让您了解它如何结合在一起。