Google地图标记精灵图像位置

我们如何将精灵图像定位为Google地图标记。对于例如：在CSS中我们定位像Google地图标记精灵图像位置

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

现在，我怎么能包括上面的代码下面的谷歌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); 
     }); 
    } 
}

来源

2012-12-09 FR STAR

要从精灵图像创建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

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

来源

2012-12-10 04:51:33 Cdeez

我试过了你的代码，并将你发的博客文章写成红色。但不幸的是，它不显示标记。我试过的代码是 ** var icon = new google.maps.MarkerImage（“http://www.mydomain.com/images/bodycss/pointer.png”，new google.maps.Size（32 ，32），新的google.maps.Point（28，32））; ** 您能告诉我这有什么问题吗？ –

查看工作小提琴的更新 – Cdeez

A大谢谢您对此表示兴趣。但它仍然不起作用，因为我已经用我的精灵图像值更新了你的小提琴脚本，它不起作用。看我的小提琴示例http://jsfiddle.net/frm683/uXL7H/。 –

可以使用MarkerImage其中，如记录here覆盖默认位置的anchor属性：

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

p.s. MarkerImage已被弃用，您应该考虑使用icon。

来源

2012-12-09 06:26:12 kieran

感谢您的快速回复。我试过下面的代码，但它不工作。 var google_image = new google.maps.MarkerImage（“http://www.mydomain.com/images/bodycss/pointer.png”，新的google.maps.Size（32，32），新的google.maps。点（28,32））; 由于MarkerImage不推荐使用，我无法理解如何使用此图标。你能否给我举个例子来说明我的要求？其实我的精灵图像尺寸应该是高度：32px;宽度：32px和图像路径和位置如下 background：url（'../ images/bodycss/pointer.png'）28px -32px; –

之前MarkerImage类成为弃用（这意味着它仍然支持，但应及时更换）有利于图标的对象，你可能会写这样的一个简单的图像：

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

现在，使用图标的对象，你会这样写：

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参数：简单的图像，这是原始图像的大小 - 在这种特定情况下是相同的尺寸参数。

对于精灵，在那里你必须包含在一个单一的图像文件多个图像，你可以使用这样的：

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

需要注意的是，在这个例子中，起源已被指定为（0，32 ）在一个包含多个16 * 16像素图像的精灵中：所以在这里，我们选择精灵中的第三个图像。在图像的该部分中，我们将锚设置为（8,8） - 即在要显示的图像的选定部分的中间。最后，缩放大小在这里指的是精灵图像的整个大小。

来源

2014-06-30 10:18:50

Google地图标记精灵图像位置

回答

相关问题