javascript - 谷歌地图 - 无法将文本和图像插入信息窗口

Question

我正在使用 google map api v3 来在 map 上显示一些标记，并在用户点击时显示 infoWindow。我可以在此 infoWindow 中插入图像或文本，有没有办法同时插入两者？

这是代码:

google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    //infowindow.setContent('<img style="width:100px; height: 50px;" src="'+arrOfGeoPoints[i].image+'" >',"This text will not appear, but the image will");
    infowindow.setContent(arrOfGeoPoints[i].address); //text shows fine here
    infowindow.open(map, marker);
  }
})(marker, i));

Answer 1

从 infoWindow.setContent 的参数中创建一个有效的 HTML 字符串:

google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent('<img style="width:100px; height: 50px;" src="'+arrOfGeoPoints[i].image+'" ><br>'+arrOfGeoPoints[i].address);
    infowindow.open(map, marker);
  }
})(marker, i));

代码片段:

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map
  });
  var arrOfGeoPoints = [{
    image: "https://developers.google.com/site-assets/logo-stack-overflow.svg",
    address: "Palo Alto"
  }];
  var i = 0;
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent('<img style="width:100px; height: 50px;" src="' + arrOfGeoPoints[i].image + '" ><br>' + arrOfGeoPoints[i].address);
      infowindow.open(map, marker);
    }
  })(marker, i));
  google.maps.event.trigger(marker, 'click');
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>