javascript - 如何解决此问题以将图像从 HTML div 元素添加到谷歌地图标记弹出内容？

Question

这是为谷歌地图 API 下载的完整 Javascript，我正在根据我的需要对其进行自定义。这段代码所做的是创建带有弹出信息的标记。 popus 内容中的文本来自 CSS 文件，包含以下信息:name、address1、address2 和 postalCode。我需要在每个标记的文本信息下方添加不同的图像，我已经为图像添加了变量并假设它应该添加类似这样的东西 "<img src=''>"在 var iwContent变量，但我不知道该怎么做

var map;
var infoWindow;
var markersData = [{
    lat: 41.998079,
    lng: 21.426156,
    name: "Camping Praia da Barra",
    address1: "Rua Diogo Cão, 125",
    address2: "Praia da Barra",
    postalCode: "3830-772 Gafanha da Nazaré"
}];

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(40.601203, -8.668173),
        zoom: 9,
        mapTypeId: 'roadmap',
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
    });
    displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);

function displayMarkers() {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markersData.length; i++) {
        var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
        var name = markersData[i].name;
        var address1 = markersData[i].address1;
        var address2 = markersData[i].address2;
        var postalCode = markersData[i].postalCode;
        var image = markersData[i].image;
        createMarker(latlng, name, address1, address2, postalCode, image);
        bounds.extend(latlng);
    }
    map.fitBounds(bounds);
}

function createMarker(latlng, name, address1, address2, postalCode, image) {
    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        title: name,
        icon: 'anchor_point_with shadow.png'
    });
    google.maps.event.addListener(marker, 'click', function() {
        var iwContent = '<div id="iw_container">' + '<div class="iw_title">' + name + '</div>' + '<div class="iw_content">' + address1 + '<br />' + address2 + '<br />' + postalCode + '</div></div>'; //i guess change should be made at this line
        infoWindow.setContent(iwContent);
        infoWindow.open(map, marker);
    });
}

Answer 1

添加 <img src="...到字符串 ìwContent包括 image , 在 markersData 中定义它之后

var markersData = [{
  lat: 41.998079,
  lng: 21.426156,
  name: "Camping Praia da Barra",
  address1: "Rua Diogo Cão, 125",
  address2: "Praia da Barra",
  postalCode: "3830-772 Gafanha da Nazaré",
  image: "http://lorempixel.com/100/100/"
}];


function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(40.601203, -8.668173),
    zoom: 9,
    mapTypeId: 'roadmap',
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  infoWindow = new google.maps.InfoWindow();


  google.maps.event.addListener(map, 'click', function() {
    infoWindow.close();
  });


  displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);



function displayMarkers() {


  var bounds = new google.maps.LatLngBounds();


  for (var i = 0; i < markersData.length; i++) {

    var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
    var name = markersData[i].name;
    var address1 = markersData[i].address1;
    var address2 = markersData[i].address2;
    var postalCode = markersData[i].postalCode;
    var image = markersData[i].image;

    createMarker(latlng, name, address1, address2, postalCode, image);


    bounds.extend(latlng);
  }

  map.fitBounds(bounds);
}


function createMarker(latlng, name, address1, address2, postalCode, image) {
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    title: name,
    //icon: 'anchor_point_with shadow.png'
  });


  google.maps.event.addListener(marker, 'click', function() {


    var iwContent = '<div id="iw_container">' +
      '<div class="iw_title">' + name + '</div>' +
      '<div class="iw_content">' + address1 + '<br />' +
      address2 + '<br />' +
      postalCode + '</div>'+
      '<img src="'+image+'"></div>'; //i guess change should be made at this line


    infoWindow.setContent(iwContent);


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

initialize();

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map-canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>