Question

我有这个框架，我目前正用作我的标记图像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'
});

有没有办法让我的照片直接放在画面图像的顶部？

Answer 1

可能的方法（使用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]的数组）：

http://jsfiddle.net/doktormolle/w8z3kg6y/

将图像放在Google Maps API标记中的图像上

1 个答案: