【问题标题】:Google Maps How to add Image into InfoWindow谷歌地图如何将图像添加到信息窗口
【发布时间】:2013-08-22 10:08:50
【问题描述】:

您好我正在尝试将图像添加到谷歌地图信息窗口中,我的代码就像这样一个脚本

 var ContactUs = function () {

return {
    //main function to initiate the module
    init: function () {
        var map;
        $(document).ready(function(){
          map = new GMaps({
            div: '#map',
            lat: -13.004333,
            lng: -38.494333,
          });
           var marker = map.addMarker({
                lat: -13.004333,
                lng: -38.494333,
                title: 'Loop, Inc.',
                infoWindow: {
                    content: "<b>Loop, Inc.</b> 795 Park Ave, Suite 120<br>San Francisco, CA 94107"
                }
            });

           marker.infoWindow.open(map, marker);
        });
    }
};

 }();

然后在我的 HTML 中它被这样调用:

  <div class="row-fluid">
     <div id="map" class="gmaps margin-bottom-40" style="height:400px;"></div>
 </div>

我尝试在脚本文件中添加图像标签,但它不起作用,我知道我必须在 html 文件中添加一些代码,但不确定是什么?

【问题讨论】:

    标签: javascript html image google-maps infowindow


    【解决方案1】:

    您添加 HTML 以引用 InfoWindow“内容”中的图像

           var marker = map.addMarker({
                lat: -13.004333,
                lng: -38.494333,
                title: 'Loop, Inc.',
                infoWindow: {
                    content: "<b>Loop, Inc.</b> 795 Park Ave, Suite 120<br>San Francisco, CA 94107<br><img src='myimage.jpg' alt='image in infowindow'>"
                }
            });
    

    以上假设图像“myimage.jpg”在本地目录中。您也可以使用绝对 URL。小心混用 "(双引号)和 '(单引号)。

    【讨论】:

      【解决方案2】:

      使用这个,我在我的应用中尝试过这个:

      infoWindow.setContent(html);
      infoWindow.open(map, marker);
      

      代替:

      infoWindow: {
          content: "<b>Loop, Inc.</b> 795 Park Ave, Suite 120<br>San Francisco, CA 94107"
      }
      

      【讨论】:

      • 那我在哪里可以添加图片标签呢?你能给我举个例子吗?
      • infoWindow.setContent('');
      • Loop, Inc. 795 Park Ave, Suite 120
        San Francisco, CA 94107
      • 我不知道@Lucifer 是一名程序员。
      猜你喜欢
      • 2018-06-05
      • 2013-08-04
      • 1970-01-01
      • 2017-11-14
      • 1970-01-01
      • 1970-01-01
      • 2011-11-09
      • 2015-04-09
      • 2015-08-17
      相关资源
      最近更新 更多