Question

我正在使用google map api v3在地图上显示一些标记，并在用户点击时使用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

您可以添加div

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

})(marker, i));

Answer 2

从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>

谷歌地图 - 无法将文字和图像插入infoWindow

2 个答案: