javascript - 将图像放在 google maps API 标记中的图像上

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 选择器通过背景“插入”图像:

   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/