谷歌地图：标记边框

Question

我正在尝试将照片显示为Google地图上的标记。将标记重新定义为图像是没有问题的，但是我想放置某种边框或阴影以使它们更好地脱颖而出。像谷歌照片这样的东西最好，但我觉得这太复杂了，如果可能的话。一个简单的1px实线边框就可以了。一种选择是实际更改图像，但这不是一个选项。此外，图像的大小不同，所以我不能将黑色图像作为阴影（比原始图像大1px）。

这是一个想法：

电流：

寻找：

EVEN COOLER：

理想世界：

这可能吗？

Answer 1

查看Rich Marker v3库demo（ actual library ），它允许使用自定义html作为标记。

设置

的标记html

<img 
  src="http://www.picturesofengland.com/img/S/1015720.jpg" 
  style="border:2px solid white;
  -moz-box-shadow:0px 0px 10px #000;
  -webkit-box-shadow:0px 0px 10px #000;
  box-shadow:0px 0px 10px #000;" 
/>

并单击切换平面（库api 中的选项）可以执行您想要的操作.. 您当然改变了图像src;）

更多图书馆请查看http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

Answer 2

@ Cinetik的comment让我克服了概念障碍。我也试图在我的应用中使用RichMarkers，我也试图为它们制作动画。当我发现RichMarker的setAnimation不仅起作用时，我也非常生气。然后我在上面做了那个评论，

  

“我想拥有我的丰富标记并为其制作动画”

并意识到我的误解。我正在为后代分享我的答案：

  

谷歌地图的Marker有各种各样的疯狂功能，比如   开箱即用的动画。它不允许使用HTML / CSS / JS   但是，操作因为它不会产生干净的HTML标记。   如果你想要，你需要RichMarker。问题是，你不能拥有   你也吃蛋糕。如果您选择加入RichMarker的优雅   HTML / CSS / JS集成，你自动选择退出一些   朴素标记的更好功能。你可以自己实现它们，   如果你愿意，拥有这种自由正是你选择的原因   RichMarker首先，不是吗？

     

所以，这里有一些代码可以使用jQuery和rdallasgray的惊人的“bez”插件向RichMarker添加一个反弹动画。

// create a marker using our element
var marker = new RichMarker({
    content: $("myElement").get(0)
});

// now animate that element!
$("#myElement").animate({ left: -100 }, 500, $.bez([0,0,0.6,1]));

我希望能帮助别人！

Answer 3

您想使用im（ImageMagick）自动为图像创建边框。