javascript - 当用户将鼠标悬停在html文档中的静态图像上时如何显示谷歌地图

Question

我想知道当用户点击图像时在灯箱中显示谷歌地图。

例如：-

<img src="map_icon.png" alt="hover over image to show corresponding map" onclick="run_map_function();" />

我真的很想知道如何做到这一点。任何帮助都感激不尽！谢谢你。

Answer 1

我不太确定是否可以使用灯箱插件，但请尝试使用 JqueryUi 对话框，它易于使用并且可以在几秒钟内设置 看看我的小提琴 http://jsfiddle.net/theodore/trnZS/49 /

Answer 2

地图需要互动吗？如果没有，你应该看看使用静态地图 api：

https://developers.google.com/maps/documentation/staticmaps/

基本上，您可以使用静态地图 api 生成您想要查看的位置的图像，如下所示：http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York, NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Ccolor:red%7Clabel: C%7C40.718217,-73.998284&sensor=false

如果您需要交互式地图，那么我建议使用 iFrame（这意味着为地图创建单独的页面）。您应该可以轻松地从灯箱中显示 iframe。