从数据库添加图像到谷歌地图infowindow

时间:2018-05-07 11:08:02

标签: mysql database image google-maps infowindow

我正在尝试将图像从mysql数据库添加到infowindow谷歌地图,但它不起作用, 即时通讯代码: 即时通讯代码: 即时通讯代码: 我正在试用这段代码:

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>

1 个答案:

答案 0 :(得分:0)

我将问题添加到代码中是正确的问题:

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

path:是xml文件从数据库中提取图像的路径