不要以XML预加载图像(Google Maps API v3) [英] Don´t preload images in XML (google maps API v3)

问题描述

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

Hey i have a question that seems very tricky.

我想为地图中的每个Infowindow添加图像.但是线索是图像不应该直接从XML解析，因为如果有300个标记，并且对于每个标记都有一个图像，那么将需要在mapstart上加载非常大的数据.仅当标记点赞后才可以加载图像吗?

I want to add images for every Infowindow in my map. But the clue is that the images shouldn't parse directly from the XML, because if there are 300 markers and for every marker an image, that would by a very big data which have to load on mapstart. Is it possible to load the image only if the marker has cliked ?

在这里输入我的代码:

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

推荐答案

您不必关心这些图像.

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

Before you click the markers it's simply a string, no images will be loaded.

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

Only when you click on the marker this string will be used to create a <img/>-node inside the infoWindow(what will force the download)

这篇关于不要以XML预加载图像(Google Maps API v3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！