Question

我尝试使用xml文件在Google地图中显示图片我想在地图中的infowindow点击标记显示photo.jpg 在我的xml（markersxml.php）中，我有以下结构：

Static Content Conpression

这是我的代码：

Dynamic Content Compression

我试过

<marker id="1" name="Test" address="580 Darling Street, Rozelle, NSW" lat="-33.861034" lng="151.171936" type="restaurant" url="https://www.example.com" image="https://www.example.com/photo.jpg"/>

但我无法显示图片，但仅使用了检查Chrome开发者工具

<script>
 var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        },
         webcam: {
          label: 'W'
        }
      };
      var mapMarkers = []; // ADDED >>> New Array to store the markers
    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
       center: new google.maps.LatLng(-33.863276, 151.207977),
      zoom: 3
    });
    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP or XML file
      downloadUrl('markersxml.php', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
            var id = markerElem.getAttribute('id');
          var name = markerElem.getAttribute('name');
          var image = markerElem.getAttribute('image');
          var address = markerElem.getAttribute('address');
          var url = markerElem.getAttribute('url');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));
          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));
            var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
               var image = document.createElement('img');
               image.src=image;
               image.alt='altimg'
               infowincontent.appendChild(image);
               infowincontent.appendChild(document.createElement('br'));
           var text = document.createElement('a');
           text.href=url;
           text.target='_blank'
           text.textContent = name;
          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);
          });
            mapMarkers.push(marker); // ADDED >>> Add the marker to the mapMarkers array
        });

          // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, mapMarkers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'} // CHANGED >>> Replace this link with your own
        );

      });
    }

  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };

    request.open('GET', url, true);
    request.send(null);
  }

  function doNothing() {}
</script>

对此提出任何建议或意见。谢谢！

Answer 1

您的代码中有拼写错误：

   var image = document.createElement('img');
   image.src=image;
   image.alt='altimg'
   infowincontent.appendChild(image);

应该是：

   var imageEl = document.createElement('img');
   imageEl.src=image;
   imageEl.alt='altimg'
   infowincontent.appendChild(imageEl);

您正在重复使用image变量作为<img>元素和图片的网址。

Required attribute on multiple checkboxes with the same name?

proof of concept fiddle

代码段

＆＃13;

var customLabel = {
  restaurant: {
    label: 'R'
  },
  bar: {
    label: 'B'
  },
  webcam: {
    label: 'W'
  }
};
var mapMarkers = []; // ADDED >>> New Array to store the markers
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-33.863276, 151.207977),
    zoom: 3
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP or XML file
  // downloadUrl('markersxml.php', function(data) {
  // var xml = data.responseXML;
  var xml = parseXml(xmlStr);
  var markers = xml.documentElement.getElementsByTagName('marker');
  Array.prototype.forEach.call(markers, function(markerElem) {
    var id = markerElem.getAttribute('id');
    var name = markerElem.getAttribute('name');
    var image = markerElem.getAttribute('image');
    var address = markerElem.getAttribute('address');
    var url = markerElem.getAttribute('url');
    var type = markerElem.getAttribute('type');
    var point = new google.maps.LatLng(
      parseFloat(markerElem.getAttribute('lat')),
      parseFloat(markerElem.getAttribute('lng')));
    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);
    infowincontent.appendChild(document.createElement('br'));
    var text = document.createElement('text');
    text.textContent = address
    infowincontent.appendChild(text);
    var imageEl = document.createElement('img');
    imageEl.src = image;
    imageEl.alt = 'altimg'
    infowincontent.appendChild(imageEl);
    infowincontent.appendChild(document.createElement('br'));
    var text = document.createElement('a');
    text.href = url;
    text.target = '_blank'
    text.textContent = name;
    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);
    });
    mapMarkers.push(marker); // ADDED >>> Add the marker to the mapMarkers array
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, mapMarkers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

  // });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}
google.maps.event.addDomListener(window, "load", initMap);

var xmlStr = '<markers><marker id="1" name="Test" address="580 Darling Street, Rozelle, NSW" lat="-33.861034" lng="151.171936" type="restaurant" url="https://www.example.com" image="http://www.geocodezip.com/images/IMG_2401-01.jpg"/></markers>';

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
};

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>

＆＃13;

在谷歌地图中使用xml显示图像

1 个答案: