javascript - 谷歌地图标记 Sprite 图像位置

Question

我们如何将 sprite 图像定位为 Google map 标记。例如:在 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

要从 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));

你可以看看这个Blog post很好地描述了它

更新- 查看这个有效的 Fiddle- DEMO ( Sprite 网址已死)

我使用了这张图片 - http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4(sprite url 已失效)和调整了图标的大小和磅值。