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

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

你可以看看这篇博客文章,它很好地描述了它

更新 - 请参阅此工作Fiddle- DEMO

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