9

我们如何将精灵图像定位为谷歌地图标记。例如：在 css 中，我们将图像定位为

background: url('../images/bodycss/pointer.png') 28px -32px;

现在如何将上面的代码包含到下面的 google api-v3 函数中？

function setMarkers(map, markers) {

    var google_image = new google.maps.MarkerImage("http://example.com/images/bodycss/pointer.png");

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4],
            icon: google_image
        });

        google.maps.event.addListener(marker, "mouseover", function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }
}
4

3 回答 3

20

要从 sprite 图像创建 MarkerImage，您需要指定要用于创建图标的图像部分的原点和大小。

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34));

你可以看看这篇描述得很好的博客文章

更新- 看到这个工作小提琴 -演示（精灵网址已死）

我使用了这张图片-http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4 （精灵网址已失效）并调整了图标的大小和点值。

于 2012-12-10T04:51:33.897 回答
4

在 MarkerImage 类被弃用（这意味着它仍然受支持，但应该被替换）以支持 Icon 对象之前，您可能已经为一个简单的图像编写了类似的内容：

var qthIconHouse20 = new google.maps.MarkerImage( 'grafx/house_icon_20.png',
                                    new google.maps.Size(20, 20),
                                    new google.maps.Point(0, 0),
                                    new google.maps.Point(10, 10) );

现在，使用 Icon 对象，你可以这样写：

var qthIconHouse20 = {  
  url:        'grafx/house_icon_20.png',
  size:       new google.maps.Size(20, 20),
  origin:     new google.maps.Point(0, 0),
  anchor:     new google.maps.Point(10, 10),
  scaledSize: new google.maps.Size(20, 20)
};

注意额外的 scaledSize 参数：对于简单图像，这是原始图像的大小 - 在这种特殊情况下，它与 size 参数相同。

对于 sprite，在单个图像文件中包含多个图像，您可以使用如下内容：

var qthIconBlueSpot16 = {
  url:        'grafx/qth_icon_spots_16.png',
  size:       new google.maps.Size(16, 16),
  origin:     new google.maps.Point(0, 32),
  anchor:     new google.maps.Point(8, 8),
  scaledSize: new google.maps.Size(16, 48)
};

请注意，在此示例中，原点已在包含多个 16*16 像素图像的精灵中指定为 (0, 32)：因此，在这里，我们选择精灵中的第三张图像。在图像的那个部分中，我们将锚点设置为 (8, 8) - 即在要显示的图像的选定部分的中间。最后，这里的scaledSize指的是整个精灵图的大小。

于 2014-06-30T10:18:50.810 回答
1

您可以使用a which的anchor属性，如此处所述，将覆盖默认位置：MarkerImage

与地图上标记的位置相对应的锚定图像的位置。默认情况下，锚点位于图像底部的中心点。

ps MarkerImage 已弃用，您应该考虑改用icon。

于 2012-12-09T06:26:12.327 回答