Question

我们如何将精灵图像定位为Google地图标记。例如：在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);
        });
    }
}

Answer 1

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

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

您可以查看描述它的Blog post

更新 - 请参见此工作小提琴 - DEMO

我使用过这张图片 - http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4并调整了图标的大小和点数值。

Answer 2

在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参数相同。

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

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指的是整个精灵图像的大小。

Answer 3

您可以使用anchor的{{1}}属性，其中记录的here会覆盖默认位置：

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

P.S。不推荐使用MarkerImage，您应该考虑使用icon。

谷歌地图标记精灵图像位置

3 个答案: