我有这个框架,我目前正用作我的标记图像http://i.stack.imgur.com/KOh5X.png。我希望框架中填充我搜索的图像。我的标记代码如下所示:
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'
});
有没有办法让我的照片直接放在画面图像的顶部?
答案 0 :(得分:2)
可能的方法(使用CSS):
默认情况下,标记将通过<canvas>
呈现,以将其标记为<img>
,将标记的optimized
- 选项设置为false
问题:没有直接访问<img>
- 元素的实现方式,但是当您知道标记的URL时,您可以使用基于此URL的CSS选择器来&#34;插入&# 34;通过背景图像:
img[src='http://i.stack.imgur.com/KOh5X.png']{
background:url(http://domain.com/path/to/img.png) no-repeat 4px 4px
}
演示:http://jsfiddle.net/doktormolle/o6et77jx/
问题很明显,您将无法将不同的图像加载到框架中,因为选择器始终是相同的。
解决方案: 添加例如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
}
可以在需要时通过脚本创建这些样式规则,请参阅http://davidwalsh.name/add-rules-stylesheets(安全应用规则)
演示(使用格式为[latitude,longitude,image-url,marker-title]
的数组):