[英]Place an image over an image in google maps API marker
I have this frame that I am currently using as my marker images http://i.stack.imgur.com/KOh5X.png . 我目前正在使用此框架作为标记图像http://i.stack.imgur.com/KOh5X.png 。 I would like the frames to be populated with images that I search for.
我希望在框架中填充搜索的图像。 My code for the marker looks like this:
我的标记代码如下所示:
var marker = new google.maps.Marker({
position: results[i].geometry.location,
map: map,
name: results[i].name,
//icon: eachPhotoinArray
icon: 'http://i.stack.imgur.com/KOh5X.png'
});
Is there a way to get my photos to be placed directly on top of the frame image? 有没有办法让我的照片直接放在框架图像的顶部?
possible approach(using CSS): 可能的方法(使用CSS):
markers by default will be rendered via <canvas>
, to render them as <img>
set the optimized
-option of the marker to false
默认情况下,标记将通过
<canvas>
呈现,将其呈现为<img>
,将标记的optimized
设置为false
The problem: There is no implemented way to access the <img>
-elements directly, but when you know the URL of the marker you may use a CSS-selector based on this URL to "insert" the images via background: 问题:没有直接访问
<img>
-elements的实现方法,但是当您知道标记的URL时,可以使用基于该URL的CSS选择器通过背景“插入”图像:
img[src='http://i.stack.imgur.com/KOh5X.png']{
background:url(http://domain.com/path/to/img.png) no-repeat 4px 4px
}
Demo: http://jsfiddle.net/doktormolle/o6et77jx/ 演示: http : //jsfiddle.net/doktormolle/o6et77jx/
The problem is clear, you will not be able to load different images into the frame, because the selector is always the same. 问题很明显,因为选择器始终相同,您将无法将不同的图像加载到框架中。
Solution: add eg a hash to the URL to get a distinct selector: 解决方案:例如,在URL上添加一个哈希以获取不同的选择器:
img[src='http://i.stack.imgur.com/KOh5X.png#1']{
background:url(http://domain.com/path/to/img.png) no-repeat 4px 4px
}
img[src='http://i.stack.imgur.com/KOh5X.png#2']{
background:url(http://domain.com/path/to/anotherimg.png) no-repeat 4px 4px
}
These style-rules may be created via script when you want to, see http://davidwalsh.name/add-rules-stylesheets (Safely Applying Rules) 这些样式规则可以在需要时通过脚本创建,请参阅http://davidwalsh.name/add-rules-stylesheets (安全应用规则)
Demo(using an array with the format [latitude,longitude,image-url,marker-title]
) : 演示(使用具有
[latitude,longitude,image-url,marker-title]
格式的数组):
http://jsfiddle.net/doktormolle/w8z3kg6y/ http://jsfiddle.net/doktormolle/w8z3kg6y/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.