地图标记未在IE中显示

时间:2016-04-11 13:26:00

标签: javascript internet-explorer google-maps-api-3 google-maps-markers

我有一个让我变得怪异的小问题

我已使用自己的标记对Google地图网站进行了编程。在StackOverflow上,我发现了大多数解决方案,但不是最后一个解决方案。

有趣的是,如果网站在网络服务器上运行,我的代码正在运行。 但是html必须在没有任何web服务器的情况下运行。 所以我无法找到,为什么我的网站正在使用网络服务器处理IE,但不是没有它。如果不工作,我的意思是,我可以看到地图,但不能看到标记。

Firefox没有问题,他使用和不使用服务器运行网站

如果你能帮助我,我会非常高兴和放心

这是我的代码:

`

//+++++++++++ Hier werden die Adresslisten eingelesen++++++


var l1 = "FSadressliste.xml" ;
var l2 = "MSadressliste.xml" ;
var l3 = "PAadressliste.xml" ; 
var l4 = "SKadressliste.xml" ;
var l5 = "SSadressliste.xml" ; 
var l6 = "TKadressliste.xml" ; 
var l7 = "TSadressliste.xml" ;
var l8 = "UWadressliste.xml" ; 
var l9 = "VKadressliste.xml" ;


//+++++++++++ Hier werden die Bilder/Icons eingelesen++++++

var customIcons = {
  fs: {
    icon: 'FS.png'
  },
  ms: {
    icon: 'MS.png'
  },
  pa: {
    icon: 'PA.png'
  },
  sk: {
    icon: 'SK.png'
  },
  ss: {
    icon: 'SS.png'
  },
  tk: {
    icon: 'TK.png'
  },
  ts: {
    icon: 'TS.png'
  },
  uw: {
    icon: 'UW.png'
  },
  vk: {
    icon: 'VK.png'
  }
};




//+++++++++++ Hier erstellen wir Arrays für die Marker++++++++++

var markerGroups = {
  "fs": [],
  "ms": [],
  "pa": [],
  "sk": [],
  "ss": [],
  "tk": [],
  "ts": [],
  "uw": [],
  "vk": []
};

//+++++++++++ Hier die Map erstellt++++++

function load() {
   var map = new google.maps.Map(document.getElementById("map"), {
          center: {lat: 47.560393, lng: 9.093359},
          zoom:11

  });


  var infoWindow = new google.maps.InfoWindow;

  //+++++++++++ Hier werden die Adresslisten ausgewertet und die Marker erstellt++++++

  //+++++++++++ Hier werden die Adressen der Freileitungsschalter ausgewertet und die Marker erstellt++++++  
      downloadUrl( l1 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon

          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });     

  //+++++++++++ Hier werden die Adressen der Messstationen ausgewertet und die Marker erstellt++++++          
      downloadUrl( l2 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,                
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });   

  //+++++++++++ Hier werden die Adressen der Produktionsanlagen ausgewertet und die Marker erstellt++++++         
      downloadUrl( l3 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Schaltkabinen ausgewertet und die Marker erstellt++++++
      downloadUrl( l4 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Schaltstationen ausgewertet und die Marker erstellt++++++
      downloadUrl( l5 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Trennkabinen ausgewertet und die Marker erstellt++++++
      downloadUrl( l6 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Trafostationen ausgewertet und die Marker erstellt++++++
      downloadUrl( l7 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Unterwerke ausgewertet und die Marker erstellt++++++
      downloadUrl( l8 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);    
        }
      });

  //+++++++++++ Hier werden die Adressen der Verteilkabinen ausgewertet und die Marker erstellt++++++
      downloadUrl( l9 , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
        });
          if (!markerGroups[type]) markerGroups[type] = [];
            markerGroups[type].push(marker);
          bindInfoWindow(marker, map, infoWindow, html);            
        }
      });

}

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

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() {}


function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
    } else {
      marker.setVisible(false);
    }
  }
}

`

这是HTML代码,它只显示地图和复选框以显示/隐藏标记:

<body onload="load()">
<div id="map" style="float:left; width: 1124px; height: 940px; border: 1px solid black"></div>

<div id="sidebar" style="float:left; width: 190px; height: 200px; border: 1px solid black">

   <input id="uwCheckbox" type="checkbox" onclick="toggleGroup('uw')" checked="checked" />
   <font color=blue>Unterwerke</font>

   <br/>
   <input id="ssCheckbox" type="checkbox" onclick="toggleGroup('ss')" checked="checked"/>
   <font color=red>Schaltstationen</font>

   <br/>
   <input id="skCheckbox" type="checkbox" onclick="toggleGroup('sk')" checked="checked"/>
   <font color=orange>Schaltkabinen</font>


   <br/>
   <input id="tkCheckbox" type="checkbox" onclick="toggleGroup('tk')" checked="checked"/>
   <font color=green>Trennkabinen</font>

   <br/>
   <input id="msCheckbox" type="checkbox" onclick="toggleGroup('ms')" checked="checked"/>
   Messstationen

   <br/>
   <input id="vkCheckbox" type="checkbox" onclick="toggleGroup('vk')" checked="checked"/>
   <font color=#8904B1>Verteilkabinen</font>

   <br/>
   <input id="fsCheckbox" type="checkbox" onclick="toggleGroup('fs')" checked="checked"/>
   <font color=#58D3F7>Freileitungsschalter</font>

   <br/>
   <input id="tsCheckbox" type="checkbox" onclick="toggleGroup('ts')" checked="checked"/>
   <font color=#FF00E5>Trafostationen</font>

   <br/>
   <input id="paCheckbox" type="checkbox" onclick="toggleGroup('pa')" checked="checked"/>
   <font color=#A5DF00>Produktionsanlagen</font>


</div>

和其中一个XML文件:

<mapr_markers>
          <marker name="UW Amriswil" address="Amriswil" lat="47.548073" lng="9.313464" type="uw"/>
          <marker name="UW Arbon" address="Arbon" lat="47.502347" lng="9.410775" type="uw"/>
          <marker name="UW Bischofszell" address="Bischofszell" lat="47.500574" lng="9.243699" type="uw"/>
          <marker name="UW FrauenfeldOst" address="FrauenfeldOst" lat="47.572749" lng="8.914427" type="uw"/>
          <marker name="UW FrauenfeldWest" address="FrauenfeldWest" lat="47.562203" lng="8.887554" type="uw"/>
          <marker name="UW Hasli" address="Hasli" lat="47.592189" lng="9.006187" type="uw"/>
          <marker name="UW Ifwil" address="Ifwil" lat="47.464317" lng="8.945181" type="uw"/>
          <marker name="UW KreuzllngenOst" address="KreuzllngenOst" lat="47.633962" lng="9.201323" type="uw"/>
          <marker name="UW KreuzllngenWest" address="KreuzllngenWest" lat="47.649714" lng="9.152670" type="uw"/>
          <marker name="UW NeuMuenchwilen" address="NeuMuenchwilen" lat="47.472727" lng="8.989533" type="uw"/>
          <marker name="UW Schlattlngen" address="Schlattlngen" lat="47.657092" lng="8.775852" type="uw"/>
          <marker name="UW Steckborn" address="Steckborn" lat="47.658691" lng="8.990843" type="uw"/>
          <marker name="UW Sulgen" address="Sulgen" lat="47.525419" lng="9.180990" type="uw"/>
          <marker name="UW Waengi" address="Waengi" lat="47.498224" lng="8.949127" type="uw"/>
          <marker name="UW Weinfelden" address="Weinfelden" lat="47.560393" lng="9.093359" type="uw"/>

我试过的另一个函数,获取XMLHttpRequest:

    function downloadUrl(url, callback) {
  var request = null;
    if(window.XMLHttpRequest){ //Google Chrome, Mozilla Firefox, Opera, Safari, IE 7
        request = new XMLHttpRequest();
    }
    else if(window.ActiveXObject){ // Internet Explorer 6 und niedriger
        try{
            request = new ActiveXObject("Msxml2.XMLHTTP.6.0");
        } catch(e){
            try{
                request = new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }
            catch(e){}
        }
    }

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

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

---------编辑

在Point处有一个拒绝访问权限,我在其中调用:request.open(&#39; GET&#39;,url,true);

但我无法将我的网站添加到受信任的网站,因为我的网站是本地的(&#34;离线&#34;)以及本地保存的所有内容,因为IE是一个受信任的网站。

我还添加了#34;每个人&#34;完全控制的文件夹权限。

0 个答案:

没有答案