谷歌地图:使用自定义标记显示当前用户位置

Google Maps: Display the current users location with a custom marker

本文关键字：显示 用户 位置 自定义 谷歌地图      更新时间：2024-02-08

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

正如你所看到的，我有三个部分（我借用了Foursquare图标进行演示）：

1.）用户所在的标记

2.）用户的化身（注意，这可能会根据用户是否登录并拥有自定义化身或只是神秘人而改变）

3.）位于化身和标记两者之上的化身框架。

我想做的是让化身很好地位于框架内，如果可能的话，也许可以作为背景图像？在文档中没有看到任何关于这一点的内容，但框架需要在化身上方，这样它才能创建圆角遮罩

我还希望它们一起倒下，因为有时框架会出现在标记点的下面，而不是总是像应该的那样在上面。所以它们需要像一个整体一样同时倒下

有谷歌地图知识的人能帮我完成这两部分吗？感谢

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

  • 标记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对象可以包含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处理程序绑定到每个对象，然后按顺序设置图像的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";

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

相关文章：