我有一个让我变得怪异的小问题
我已使用自己的标记对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;完全控制的文件夹权限。