1

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

如您所见，我有三个部分（我为演示借用了 Foursquare 图标）：

1.) 用户所在的标记

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

3.) 位于化身和标记顶部的化身框架。

我想要做的是让化身很好地坐在框架内，也许作为背景图像而不是如果可能的话？在文档中没有看到任何关于此的内容，但框架需要位于头像上方，以便创建圆角蒙版。

而且我希望它们一起掉下来，因为有时框架出现在标记点下方，而不是总是在应该的顶部。所以他们需要作为一个整体，同时下降。

有谷歌地图知识的人可以帮我解决这两个部分吗？谢谢

4

1 回答 1

1

关于整个动画，有几点值得注意：

  • 标记 z-index 在动画期间是不一致的，因为它直到标记处于其最终位置时才设置，因此在放置期间您真正可以做的控制它的唯一方法是setMap尽可能最好地对每个标记的函数的调用进行排序哄他们在下降时按顺序堆叠。这意味着首先调用最后一个对象的函数，然后按堆叠顺序处理更接近的图像。但是，一旦动画完成，它们将始终按正确的顺序排列。
  • 为了控制setMap调用的顺序，您必须唯一地命名存储Marker对象的变量。
  • 标记在加载之前不会添加到地图并进行动画处理，因此最好在代码中创建图像对象并预加载图像，然后在onload完成后将标记动画设置为事件的回调.

即使所有这些都到位，图像仍然会单独下降，因此它可能不会完全达到您正在寻找的效果，但这可能是使其尽可能接近的方法。

设置 Z 索引

首先，您的标记的 z-index 可以轻松设置为MarkerOptions您传递给Marker构造函数的其中一个：

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按顺序设置图像的属性 -<strong>。您创建标记并将它们添加到地图的代码应该只在所有三个图像都加载后发生。

// 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";

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

于 2012-07-24T14:46:32.003 回答