从数据库向googleMap信息窗口添加图像

hvvq6cgz  于 2021-06-25  发布在  Mysql
关注(0)|答案(1)|浏览(348)

我正在尝试从mysql数据库向infowindow googleMap添加一个图像,但它不起作用,我正在尝试以下代码:我正在尝试以下代码:我正在尝试以下代码:我正在尝试以下代码:

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>
4sup72z8

4sup72z81#

我是对的问题è通过将此添加到代码:

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

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

相关问题