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

Place an image over an image in google maps API marker

本文关键字：图像 API 谷歌地图      更新时间：2023-09-26

我有一个当前用作标记图像的框架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
   }

演示：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（安全应用规则）

Demo（使用格式为[latitude,longitude,image-url,marker-title]的数组）：

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

相关文章：