在Google Maps API标记中的图片上放置图片 [英] Place an image over an image in google maps API marker

问题描述

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

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

解决方案

可能的方法（使用CSS）：默认情况下，

通过< canvas> 渲染，将它们渲染为< img> 设置优化 - 选择标记到 false

问题：没有实现的方式直接访问< img> -elements，但是当您知道标记的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 /

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

解决方案：
例如添加一个散列到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 （安全地应用规则）

演示（使用格式为 [纬度，经度，图片URL，标记标题] ）：

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

I have this frame that I am currently using as my marker images http://i.stack.imgur.com/KOh5X.png. I would like the frames to be populated with images that I search for. My code for the marker looks like this:

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'
});

Is there a way to get my photos to be placed directly on top of the frame image?

解决方案

possible approach(using CSS):

markers by default will be rendered via <canvas>, to render them as <img> set the optimized-option of the marker to false

The problem: There is no implemented way to access the <img>-elements directly, but when you know the URL of the marker you may use a CSS-selector based on this URL to "insert" the images via background:

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

The problem is clear, you will not be able to load different images into the frame, because the selector is always the same.

Solution: add e.g. a hash to the URL to get a distinct selector:

   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
   }

These style-rules may be created via script when you want to, see http://davidwalsh.name/add-rules-stylesheets (Safely Applying Rules)

Demo(using an array with the format[latitude,longitude,image-url,marker-title]) :

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

这篇关于在Google Maps API标记中的图片上放置图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！