通过 URL 将图像插入 Google Maps infoWindow

Question

我有一个谷歌地图，其中显示了一组格式化为 Panoramio 缩略图的标记。 我已经为数组中的每个标记设置了 infoWindows，以便在单击标记时显示更大版本的图像。

我的策略是通过 JSON.Stringify 检索 Panoramio 缩略图的 URL，对其运行 String Replace 以将 URL 路径中的“mini_square”图像大小替换为“medium”（并删除每端），然后将 url 作为图像源传递给 infoWindow；单击标记时，我只得到一个“损坏的图像”图标。如果有人知道为什么我传递的 URL 没有导致图像显示，那将是一个很大的帮助。

下面是我的代码。

  <style>
    #map  {
      width: 100%;
      height: 100%;
  }
   </style>

<script>
  pixMap = new google.maps.Map(document.getElementById('map'), pixOptions);


  var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=100&minx=-2.494046&miny=53.429721&maxx=-2.00048&maxy=53.528126&size=mini_square&mapfilter=true&callback=?";
  var pix_Nfo = new google.maps.InfoWindow({maxWidth: 400});

  $.getJSON(thumbUrl, function(data) {

     for (var i = 0; i < data.photos.length; i++) {
       var item = data.photos[i];
       var latLng = new google.maps.LatLng(item.latitude, item.longitude); 
       var marker = new google.maps.Marker({
         position:latLng,
         icon: item.photo_file_url
       });
     marker.setMap(pixMap);

    (function(marker, item)  {    
       google.maps.event.addListener(marker, "click", function(e)  {
       bigPic = JSON.stringify(item.photo_file_url);
       var bp = bigPic.replace("mini_square","medium");
       //pix_Nfo.setContent('<img src=bp>');
       var bpnq = bp.replace(/"/g,"");
       pix_Nfo.setContent('<p><src img=bpnq></p>');
       pix_Nfo.open(pixMap, marker);
       });
    })(marker, item);
    };
  }); 
</script>

Answer 1

要以 HTML 格式显示图像，您需要传入 URL。

   google.maps.event.addListener(marker, "click", function(e)  {
     bigPic = JSON.stringify(item.photo_file_url);
     var bp = bigPic.replace("mini_square","medium");
     var bpnq = bp.replace(/"/g,"");
     pix_Nfo.setContent('<p><img src='+bpnq+'></p>');
     pix_Nfo.open(pixMap, marker);
   });

proof of concept fiddle

// function initialize() {
pixMap = new google.maps.Map(document.getElementById('map'));


var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=100&minx=-2.494046&miny=53.429721&maxx=-2.00048&maxy=53.528126&size=mini_square&mapfilter=true&callback=?";
var pix_Nfo = new google.maps.InfoWindow({
  maxWidth: 400
});

$.getJSON(thumbUrl, function(data) {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < data.photos.length; i++) {
    var item = data.photos[i];
    var latLng = new google.maps.LatLng(item.latitude, item.longitude);
    bounds.extend(latLng);
    var marker = new google.maps.Marker({
      position: latLng,
      icon: item.photo_file_url
    });
    marker.setMap(pixMap);

    (function(marker, item) {
      google.maps.event.addListener(marker, "click", function(e) {
        bigPic = JSON.stringify(item.photo_file_url);
        var bp = bigPic.replace("mini_square", "medium");
        //pix_Nfo.setContent('<img src=bp>');
        var bpnq = bp.replace(/"/g, "");
        pix_Nfo.setContent('<p><img src=' + bpnq + '></p>');
        pix_Nfo.open(pixMap, marker);
        // reopen infowindow, so fits in map.
        google.maps.event.addListener(pix_Nfo, 'domready', function() {
          google.maps.event.trigger(marker, 'click');
        });
      });
    })(marker, item);
  };
  pixMap.fitBounds(bounds);
});
//   }
// google.maps.event.addDomListener(window,'load',initialize);

body,
html,
#map {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>