javascript 谷歌地图标记精灵图像位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13785226/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google map marker sprite image position
提问by FR STAR
How can we position the sprite image as Google map marker. For eg: In css we are positioning the image like
我们如何将精灵图像定位为 Google 地图标记。例如：在 css 中，我们将图像定位为
background: url('../images/bodycss/pointer.png') 28px -32px;
Now how can I include the above code to the below google api-v3 function ?
现在如何将上述代码包含在下面的 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);
});
}
}
回答by Cdeez
To create a MarkerImage from a sprite image, you need to specify the origin and size of the section of the image you want to use to create the icon.
要从精灵图像创建 MarkerImage，您需要指定要用于创建图标的图像部分的原点和大小。
var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34));
You can have a look at this Blog postthat describes it well
你可以看看这篇博客文章，它描述得很好
Update- See this working Fiddle- DEMO
更新- 请参阅此工作 Fiddle- DEMO
I have used this image- http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4and adjusted the size and point values for the icon.
我使用了这张图片 - http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4并调整了图标的大小和点值。
回答by Rob Banmeadows
Before the MarkerImage class became deprecated (which means it's still supported, but should be replaced) in favour of the Icon object, you might have written something like this for a simple image:
在 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) );
Now, using the Icon object, you would write this:
现在，使用 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)
};
Note the extra scaledSize parameter: for simple images, this is the size of the original image - which in this particular case is the same as the size parameter.
注意额外的 scaledSize 参数：对于简单图像，这是原始图像的大小 - 在这种特殊情况下与 size 参数相同。
For sprites, where you have several images contained in a single image file, you might use something like this:
对于精灵，在单个图像文件中包含多个图像，您可以使用以下内容：
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)
};
Note that, in this example, the origin has been specified as (0, 32) in a sprite containing multiple 16*16 pixel images: so here, we're selecting the thirdimage in the sprite. Within that portion of the image, we set the anchor to (8, 8) - i.e. in the middle of the selected portion of the image to be displayed. Finally, the scaledSize here refers to the size of the entiresprite image.
请注意，在此示例中，原点已在包含多个 16*16 像素图像的精灵中指定为 (0, 32)：因此，在这里，我们选择精灵中的第三个图像。在图像的那部分内，我们将锚点设置为 (8, 8) - 即在要显示的图像所选部分的中间。最后，这里的 scaledSize 指的是整个精灵图像的大小。
回答by kieran
You can use the anchorproperty of a MarkerImagewhich, as documented hereoverrides the default position:
您可以使用anchor一个的属性MarkerImage，正如记载这里覆盖默认位置：
The position at which to anchor an image in correspondance to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
根据地图上标记的位置锚定图像的位置。默认情况下，锚点位于图像底部的中心点。
p.s. MarkerImage is deprecated, and you should consider using iconinstead.
ps MarkerImage 已弃用，您应该考虑使用icon代替。
