不要在 XML 中预加载图像(谷歌地图 API v3)

Question

嘿，我有一个问题似乎很棘手。

我想为地图中的每个信息窗口添加图像。但线索是图像不应该直接从XML解析，因为如果有300个标记并且每个标记都是一个图像，那么这将是一个非常大的数据，必须在mapstart上加载。是否可以仅在标记已弯曲时才加载图像？

这是我的代码：

<script type="text/javascript"> 
      var side_bar_html = ""; 
       var sidebarMarkers = []; 
     var infoWindow = new google.maps.InfoWindow(
    { 
        maxWidth: 250
      });
     <!----------- GASTHAUS image ------------> 
        var imageGasthaus = {
        url: 'image/gasthaus.png',
        scaledSize: new google.maps.Size(26, 26),   
      };

     <!----------- BAR image ------------>  
      var imageBar = {
        url: 'image/bar.png',
        scaledSize: new google.maps.Size(26, 26),   
      };


      var hoverIcons = [];
        hoverIcons["gasthaus"] = imageGasthausHover;
        hoverIcons["bar"] = imageBarHover;

      var customIcons = [];
        customIcons["gasthaus"] = imageGasthaus;
        customIcons["bar"] = imageBar;

        var markerGroups = { "gasthaus": [], "bar": []};

     function myclick(i) {
      google.maps.event.trigger(sidebarMarkers[i], "click");
    }
     function createMarker(latlng, name, address, tel, href, image, type) {
            var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: customIcons[type],
            zIndex: Math.round(latlng.lat()*-100000)<<5
            });

    //// Infowindow öffnen bei Linksklick

        var onMarkerClick = function() {
          var marker = this;
          infoWindow.setContent(html);
          infoWindow.open(map, marker);
        };
    google.maps.event.addListener(marker, 'click', onMarkerClick);

    //// Infowindow Inhalt 
      var html = '<div id="infowindowLink" style = "line-height: 1.35; overflow: hidden; ">' + '<span style="font-weight: bold; color:#008B00;">' + name + '</span> <br/>' + address + '<br><br>' + '<span>'  + href + '</span>' + '<br>'+ tel + '<br><br>'+ image + '</div>';
        side_bar_html += '<a href="javascript:myclick(' + (sidebarMarkers.length-1) + ')">' + name + '</a><br>';
     var zooms = point;
    }
    function initialize() {

    // XML-Datei auslesen
          downloadUrl("markerdata.xml", function(doc) {
            var xmlDoc = xmlParse(doc);
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
        name = markers[i].getAttribute("name");
                var address = markers[i].getAttribute("address");
                var tel = markers[i].getAttribute("tel");
                var href= '<a href="'+markers[i].getAttribute("href")+'" target="_blank">'+markers[i].getAttribute("web")+'</a>';

                // This should be loaded only if a marker get clicked 
                var image = '<img src="'+markers[i].getAttribute("image")+'" style="width:250px; height:180px;" alt=""/>';          

     var type = markers[i].getAttribute("type");
               point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));


            var marker = createMarker(point, name, address, tel, href, image, type);
            }
      document.getElementById("side_bar").innerHTML = side_bar_html;
          });
        }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

您不必关心这些图像。

在单击标记之前，它只是一个字符串，不会加载任何图像。

仅当您单击标记时，此字符串才会用于在infoWindow内创建一个<img/>节点（这将强制下载）