从数据库中将图像添加到 google 地图信息窗口

Question

我正在尝试从 mysql 数据库向信息窗口 google 地图添加图像，但它不起作用，我正在尝试这段代码：我正在尝试这段代码：我正在尝试这段代码：我正在尝试这段代码：

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(33.5934134, -7.6574144),
      zoom: 16
    });
    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP or XML file
      downloadUrl('http://source.com/map/info.php', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var name = markerElem.getAttribute('name');
          var address = markerElem.getAttribute('description');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('latitude')),
              parseFloat(markerElem.getAttribute('longitude')));






          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));

                        var img = document.createElement('img');                                 
                        img.src =markerElem.getAttribute('path') ;
                        img.style.width = '40%';
                        infowincontent.appendChild(img);


          var text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text);
          var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });
          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
          });
        });
      });
    }

这是 XML 正在获取数据：

<markers><marker name="1525684435213.jpg" description="rest 2" latitude="33.5934134" longitude="-7.6574144" path="www.source.com/images/1525684435213.jpg" type=""/></markers>

Answer 1

我通过将此添加到代码中纠正了问题：

 var img = document.createElement('img');                                 
                    img.src =markerElem.getAttribute('path') ;
                    img.style.width = '40%';
                    infowincontent.appendChild(img);

path : 是xml file

从数据库中获取图片的路径

从数据库中将图像添加到 google 地图信息窗口

Add image to google map infowindow from database

mysql

database

google-maps

image

infowindow