将图像放在 google 地图 API 标记中的图像上

我目前正在使用这个框架作为我的标记图像https://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: 'https://i.stack.imgur.com/KOh5X.png'
});

有没有办法让我的照片直接放置在框架图像的顶部？

可能的方法（使用CSS）：

默认情况下，标记将通过以下方式呈现<canvas>，将它们呈现为<img>设置optimized- 标记的选项false

问题：没有实现的方法来访问<img>-直接元素，但是当您知道标记的 URL 时，您可以使用基于此 URL 的 CSS 选择器通过背景“插入”图像：

   img[src='https://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/

问题很明显，您将无法将不同的图像加载到框架中，因为选择器始终相同。

解决方案： 添加例如URL 的哈希值以获得不同的选择器：

   img[src='https://i.stack.imgur.com/KOh5X.png#1']{
    background:url(http://domain.com/path/to/img.png) no-repeat 4px 4px
   }

   img[src='https://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/