顯示圖像映射

我tryng使用XML文件顯示在谷歌地圖圖像我的Wnt顯示photo.jpg信息窗口中點擊標記在地圖上
在我的XML（markersxml.php）我有以下結構：顯示圖像映射

<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"/>

這是我的代碼：

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

我試圖與

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

，但我不能讓顯示的圖像但檢查Chrome開發者工具只有

<img src="[object HTMLImageElement]" alt="altimg">

對此有何建議或意見。謝謝！

來源

2017-10-21 grigione

你在你的代碼一個錯字：

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>元素和圖像的URL兩者。

proof of concept fiddle

代碼片斷：

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'); 
 
    } 
 
};

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

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

來源

2017-10-22 02:48:11 geocodezip

顯示圖像映射

回答

相關問題