不要在XML中预载图像（谷歌地图API v3） [英] Don´t preload images in XML (google maps API v3)

问题描述

我有一个似乎非常棘手的问题。

我想为我的地图中的每个Infowindow添加图片。但是线索是，图像不应该直接从XML中解析出来，因为如果有300个标记并且每个标记都是一个图像，那么就需要在mapstart上加载一个非常大的数据。只有当标记已被粘连时才能加载图像？

我的代码：
$ b

  < 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：[]}; 
 
 
函数myclick（i）{
 google.maps.event.trigger（sidebarMarkers [i]，click）; 
 
 
函数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 
}）; 
 
 $ b //// Infowindowöffnenbei Linksklick 
 
 
 var onMarkerClick = function（）{
 var marker = this; 
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
}; 
 
 google.maps.event.addListener（标记，'点击'，onMarkerClick）; 
 
 
 //// Infowindow Inhalt 
 
 var html ='< div id =infowindowLinkstyle =line-height：1.35; overflow：hidden ;>'+'< span style =font-weight：bold; color：＃008B00;>'+ name +'< / span> < br />'+ address +'< br>< br>'+'< span>'+ href +'< / span>'+'< br>< br>'+ image +'< / div>'; 
 
 side_bar_html + ='< a href =javascript：myclick（'+（sidebarMarkers.length-1）+'）>'+ name +'< \ / a><峰; br>'; 
 
 var zooms = point; 
 
 
 $ b函数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>'; 
 
 
 //只能加载如果标记点击
 
 var image ='< img src =''+ markers [i] .getAttribute（image）+'style =width：250px; height：180px; alt =/>'; 
 
 
 var type = markers [i ] .getAttribute（ 类型）; 
 
 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> 
  

解决方案

您不必关心这些图片。

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

只有当您点击在标记上，这个字符串将用于在infoWindow内创建一个< img /> -node（这将强制下载）

Hey i have a question that seems very tricky.

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 ?

Heres my code:

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

解决方案

You don't have to care about these images.

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

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中预载图像（谷歌地图API v3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！