我已经实现了一个带有嵌入式地图的应用程序,该应用程序在IE上运行良好,但在Firefox和Google Chrome上都不能很好地运行。
实际上,应用程序应连接到数据库,获取与某些发射器相关的数据,并根据经度和纬度值在地图上显示标记。在IE上一切都很好,但由于某些原因,地图不会在Firefox和Google Chrome上显示。但是当我查看所有这些浏览器的页面源代码时,它们看起来都很相似,所以我真的不明白错误。
我真的被困了,如果你能帮助我,我真的很感激!!
以下是JSP代码的一部分,其中包含从对象检索数据并显示标记的脚本:
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page session="true"%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta http-equiv="refresh" content="30"> -->
<title>Dashboard (Admin)</title>
<!-- google maps API -->
<script src="http://maps.googleapis.com/maps/api/js"> </script>
<!-- JQuery Validation Plugin -->
<script type="text/javascript" src="<c:url value="/bootstrap/js/configurationUpdate.js"/>"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core javaScript -->
<script type="text/javascript" src="<c:url value="/bootstrap/js/munich.js"/>"></script>
<!-- Bootstrap core CSS -->
<link href="<c:url value="/bootstrap/css/bootstrap.min.css" />" rel="stylesheet">
<link href="<c:url value="/bootstrap/css/dashboard.css"/>" rel="stylesheet">
<link href="<c:url value="/bootstrap/css/bootstrap-datetimepicker.css"/>" rel="stylesheet">
<script type="text/javascript" src="<c:url value="/bootstrap/js/jquery-2.1.1.min.js"/>"></script>
<script type="text/javascript"
src="<c:url value="/bootstrap/js/munich.js"/>"></script>
<script src="<c:url value="/bootstrap/js/highstock.js"/>"></script>
<script src="<c:url value="/bootstrap/js/exporting.js"/>"></script>
<script type="text/javascript">
var lat = [];
var lng = [];
var status = [];
var ipAddress = [];
var height = [];
var currentPower = [];
var prn = [];
var frequencyOffset = [];
var connectivity = [];
var height = [];
var emergencyMessage = [];
var nominalMessage = [];
var iliteId = [];
var transmission = [];
var latitude_tmp = 0;
var longitude_tmp = 0;
<c:forEach items="${iLiteList}" var="ilites" varStatus="status">
status.push("${ilites.status}");
latitude_tmp = (parseFloat("${ilites.latitude}"));
longitude_tmp = (parseFloat("${ilites.longitude}"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("${ilites.iliteId}");
prn.push("${ilites.prn}");
frequencyOffset.push("${ilites.frequencyOffset}");
currentPower.push("${ilites.currentPower}");
ipAddress.push("${ilites.ipAddress}");
height.push(parseFloat("${ilites.height}"));
connectivity.push("${ilite`enter code here`s.connectivity}");
emergencyMessage.push("${ilites.emergencyMessage}");
nominalMessage.push("${ilites.nominalMessage}");
transmission.push("${ilites.transmission}");
</c:forEach>
// Map creation
var myCenter=new google.maps.LatLng(48.052562,11.653793);
function initialize()
{
alert(status[0]);
var mapProp = {
center:myCenter,
zoom:18,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map1=new google.maps.Map(document.getElementById("googleMap1"),mapProp);
var marker = [] ;
var latLng = [];
/* var infowindow = []; */
for(i = 0; i<lat.length; i ++){
latLng [i] = new google.maps.LatLng(lat[i],lng[i]);
}
for (i = 0; i<lat.length; i ++){
marker[i]=new google.maps.Marker({
position:latLng [i],
map: map1,
});
if((transmission[i]).localeCompare("ON") == 0){
marker[i].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}else{
marker[i].setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
marker[i].setMap(map1);
google.maps.event.addListener(marker[i], 'click', (function(i) {
return function() {
document.getElementById("latitude").value = lat[i];
document.getElementById("iLiteID").value = iliteId[i];
document.getElementById("status").value = status[i];
document.getElementById("ipAddress").value = ipAddress[i];
document.getElementById("longitude").value = lng[i];
document.getElementById("currentPower").value = currentPower[i];
document.getElementById("connectivity").value = connectivity[i];
document.getElementById("height").value = height[i];
document.getElementById("emergencyMessage").value = emergencyMessage[i];
document.getElementById("nominalMessage").value = nominalMessage[i];
document.getElementById("prn").value = prn[i];
document.getElementById("frequencyOffset").value = frequencyOffset[i];
if ((transmission[i]).localeCompare("ON") == 0) {
document.getElementById("transmission1").checked = true;
} else {
document.getElementById("transmission2").checked = true;
}
}}(i)));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
........
<div class="row" id="googleMap1" style="width: 100%; height: 50%; margin-left: 3px;" > </div>
........
</body>
</html>
每个浏览器的页面源代码(脚本部分)如下:
IE:
<script type="text/javascript">
var lat = [];
var lng = [];
var status = [];
var ipAddress = [];
var height = [];
var currentPower = [];
var prn = [];
var frequencyOffset = [];
var connectivity = [];
var height = [];
var emergencyMessage = [];
var nominalMessage = [];
var iliteId = [];
var transmission = [];
var latitude_tmp = 0;
var longitude_tmp = 0;
status.push("online");
latitude_tmp = (parseFloat("48.052562"));
longitude_tmp = (parseFloat("11.653793"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite1");
prn.push("120");
frequencyOffset.push("0");
currentPower.push("-100");
ipAddress.push("192.168.40.20");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("ON");
status.push("offline");
latitude_tmp = (parseFloat("48.052662"));
longitude_tmp = (parseFloat("11.653893"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite2");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-100");
ipAddress.push("192.168.40.12");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("OFF");
status.push("offline");
latitude_tmp = (parseFloat("48.052862"));
longitude_tmp = (parseFloat("11.653693"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite3");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-154");
ipAddress.push("192.168.40.14");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("OFF");
status.push("online");
latitude_tmp = (parseFloat("48.052962"));
longitude_tmp = (parseFloat("11.653893"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite4");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-154");
ipAddress.push("192.168.40.14");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("ON");
// Map creation
var myCenter=new google.maps.LatLng(48.052562,11.653793);
function initialize()
{
alert(status[0]);
var mapProp = {
center:myCenter,
zoom:18,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map1=new google.maps.Map(document.getElementById("googleMap1"),mapProp);
var marker = [] ;
var latLng = [];
/* var infowindow = []; */
for(i = 0; i<lat.length; i ++){
latLng [i] = new google.maps.LatLng(lat[i],lng[i]);
}
for (i = 0; i<lat.length; i ++){
marker[i]=new google.maps.Marker({
position:latLng [i],
map: map1,
});
if((transmission[i]).localeCompare("ON") == 0){
marker[i].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}else{
marker[i].setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
marker[i].setMap(map1);
google.maps.event.addListener(marker[i], 'click', (function(i) {
return function() {
document.getElementById("latitude").value = lat[i];
document.getElementById("iLiteID").value = iliteId[i];
document.getElementById("status").value = status[i];
document.getElementById("ipAddress").value = ipAddress[i];
document.getElementById("longitude").value = lng[i];
document.getElementById("currentPower").value = currentPower[i];
document.getElementById("connectivity").value = connectivity[i];
document.getElementById("height").value = height[i];
document.getElementById("emergencyMessage").value = emergencyMessage[i];
document.getElementById("nominalMessage").value = nominalMessage[i];
document.getElementById("prn").value = prn[i];
document.getElementById("frequencyOffset").value = frequencyOffset[i];
if ((transmission[i]).localeCompare("ON") == 0) {
document.getElementById("transmission1").checked = true;
} else {
document.getElementById("transmission2").checked = true;
}
}}(i)));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
火狐:
<script type="text/javascript">
var lat = [];
var lng = [];
var status = [];
var ipAddress = [];
var height = [];
var currentPower = [];
var prn = [];
var frequencyOffset = [];
var connectivity = [];
var height = [];
var emergencyMessage = [];
var nominalMessage = [];
var iliteId = [];
var transmission = [];
var latitude_tmp = 0;
var longitude_tmp = 0;
status.push("online");
latitude_tmp = (parseFloat("48.052562"));
longitude_tmp = (parseFloat("11.653793"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite1");
prn.push("120");
frequencyOffset.push("0");
currentPower.push("-100");
ipAddress.push("192.168.40.20");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("ON");
status.push("offline");
latitude_tmp = (parseFloat("48.052662"));
longitude_tmp = (parseFloat("11.653893"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite2");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-100");
ipAddress.push("192.168.40.12");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("OFF");
status.push("offline");
latitude_tmp = (parseFloat("48.052862"));
longitude_tmp = (parseFloat("11.653693"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite3");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-154");
ipAddress.push("192.168.40.14");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("OFF");
status.push("online");
latitude_tmp = (parseFloat("48.052962"));
longitude_tmp = (parseFloat("11.653893"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite4");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-154");
ipAddress.push("192.168.40.14");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("ON");
// Map creation
var myCenter=new google.maps.LatLng(48.052562,11.653793);
function initialize()
{
alert(status[0]);
var mapProp = {
center:myCenter,
zoom:18,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map1=new google.maps.Map(document.getElementById("googleMap1"),mapProp);
var marker = [] ;
var latLng = [];
/* var infowindow = []; */
for(i = 0; i<lat.length; i ++){
latLng [i] = new google.maps.LatLng(lat[i],lng[i]);
}
for (i = 0; i<lat.length; i ++){
marker[i]=new google.maps.Marker({
position:latLng [i],
map: map1,
});
if((transmission[i]).localeCompare("ON") == 0){
marker[i].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}else{
marker[i].setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
marker[i].setMap(map1);
google.maps.event.addListener(marker[i], 'click', (function(i) {
return function() {
document.getElementById("latitude").value = lat[i];
document.getElementById("iLiteID").value = iliteId[i];
document.getElementById("status").value = status[i];
document.getElementById("ipAddress").value = ipAddress[i];
document.getElementById("longitude").value = lng[i];
document.getElementById("currentPower").value = currentPower[i];
document.getElementById("connectivity").value = connectivity[i];
document.getElementById("height").value = height[i];
document.getElementById("emergencyMessage").value = emergencyMessage[i];
document.getElementById("nominalMessage").value = nominalMessage[i];
document.getElementById("prn").value = prn[i];
document.getElementById("frequencyOffset").value = frequencyOffset[i];
if ((transmission[i]).localeCompare("ON") == 0) {
document.getElementById("transmission1").checked = true;
} else {
document.getElementById("transmission2").checked = true;
}
}}(i)));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Google Chrome:
<script type="text/javascript">
var lat = [];
var lng = [];
var status = [];
var ipAddress = [];
var height = [];
var currentPower = [];
var prn = [];
var frequencyOffset = [];
var connectivity = [];
var height = [];
var emergencyMessage = [];
var nominalMessage = [];
var iliteId = [];
var transmission = [];
var latitude_tmp = 0;
var longitude_tmp = 0;
status.push("online");
latitude_tmp = (parseFloat("48.052562"));
longitude_tmp = (parseFloat("11.653793"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite1");
prn.push("120");
frequencyOffset.push("0");
currentPower.push("-100");
ipAddress.push("192.168.40.20");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("ON");
status.push("offline");
latitude_tmp = (parseFloat("48.052662"));
longitude_tmp = (parseFloat("11.653893"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite2");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-100");
ipAddress.push("192.168.40.12");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("OFF");
status.push("offline");
latitude_tmp = (parseFloat("48.052862"));
longitude_tmp = (parseFloat("11.653693"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite3");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-154");
ipAddress.push("192.168.40.14");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("OFF");
status.push("online");
latitude_tmp = (parseFloat("48.052962"));
longitude_tmp = (parseFloat("11.653893"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite4");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-154");
ipAddress.push("192.168.40.14");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("ON");
alert(status[0]);
// Map creation
var myCenter=new google.maps.LatLng(48.052562,11.653793);
function initialize()
{
alert(status[0]);
var mapProp = {
center:myCenter,
zoom:18,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map1=new google.maps.Map(document.getElementById("googleMap1"),mapProp);
var marker = [] ;
var latLng = [];
/* var infowindow = []; */
for(i = 0; i<lat.length; i ++){
latLng [i] = new google.maps.LatLng(lat[i],lng[i]);
}
for (i = 0; i<lat.length; i ++){
marker[i]=new google.maps.Marker({
position:latLng [i],
map: map1,
});
if((transmission[i]).localeCompare("ON") == 0){
marker[i].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}else{
marker[i].setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
marker[i].setMap(map1);
google.maps.event.addListener(marker[i], 'click', (function(i) {
return function() {
document.getElementById("latitude").value = lat[i];
document.getElementById("iLiteID").value = iliteId[i];
document.getElementById("status").value = status[i];
document.getElementById("ipAddress").value = ipAddress[i];
document.getElementById("longitude").value = lng[i];
document.getElementById("currentPower").value = currentPower[i];
document.getElementById("connectivity").value = connectivity[i];
document.getElementById("height").value = height[i];
document.getElementById("emergencyMessage").value = emergencyMessage[i];
document.getElementById("nominalMessage").value = nominalMessage[i];
document.getElementById("prn").value = prn[i];
document.getElementById("frequencyOffset").value = frequencyOffset[i];
if ((transmission[i]).localeCompare("ON") == 0) {
document.getElementById("transmission1").checked = true;
} else {
document.getElementById("transmission2").checked = true;
}
}}(i)));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
答案 0 :(得分:1)
我在Chrome中看到了一个javascript错误,其中包含已发布的代码Uncaught TypeError: status.push is not a function
status
用作变量名称
如果我将其更改为statusA
,我会看到地图。
代码段
var lat = [];
var lng = [];
var statusA = [];
var ipAddress = [];
var height = [];
var currentPower = [];
var prn = [];
var frequencyOffset = [];
var connectivity = [];
var height = [];
var emergencyMessage = [];
var nominalMessage = [];
var iliteId = [];
var transmission = [];
var latitude_tmp = 0;
var longitude_tmp = 0;
statusA.push("online");
latitude_tmp = (parseFloat("48.052562"));
longitude_tmp = (parseFloat("11.653793"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite1");
prn.push("120");
frequencyOffset.push("0");
currentPower.push("-100");
ipAddress.push("192.168.40.20");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("ON");
statusA.push("offline");
latitude_tmp = (parseFloat("48.052662"));
longitude_tmp = (parseFloat("11.653893"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite2");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-100");
ipAddress.push("192.168.40.12");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("OFF");
statusA.push("offline");
latitude_tmp = (parseFloat("48.052862"));
longitude_tmp = (parseFloat("11.653693"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite3");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-154");
ipAddress.push("192.168.40.14");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("OFF");
statusA.push("online");
latitude_tmp = (parseFloat("48.052962"));
longitude_tmp = (parseFloat("11.653893"));
lat.push(latitude_tmp);
lng.push(longitude_tmp);
iliteId.push("I_Lite4");
prn.push("128");
frequencyOffset.push("0");
currentPower.push("-154");
ipAddress.push("192.168.40.14");
height.push(parseFloat("234.0"));
connectivity.push("connected");
emergencyMessage.push("random");
nominalMessage.push("random");
transmission.push("ON");
// Map creation
var myCenter = new google.maps.LatLng(48.052562, 11.653793);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp);
var marker = [];
var latLng = [];
/* var infowindow = []; */
for (i = 0; i < lat.length; i++) {
latLng[i] = new google.maps.LatLng(lat[i], lng[i]);
}
for (i = 0; i < lat.length; i++) {
marker[i] = new google.maps.Marker({
position: latLng[i],
map: map1,
});
if ((transmission[i]).localeCompare("ON") == 0) {
marker[i].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
} else {
marker[i].setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
marker[i].setMap(map1);
google.maps.event.addListener(marker[i], 'click', (function(i) {
return function() {
document.getElementById("latitude").value = lat[i];
document.getElementById("iLiteID").value = iliteId[i];
document.getElementById("status").value = status[i];
document.getElementById("ipAddress").value = ipAddress[i];
document.getElementById("longitude").value = lng[i];
document.getElementById("currentPower").value = currentPower[i];
document.getElementById("connectivity").value = connectivity[i];
document.getElementById("height").value = height[i];
document.getElementById("emergencyMessage").value = emergencyMessage[i];
document.getElementById("nominalMessage").value = nominalMessage[i];
document.getElementById("prn").value = prn[i];
document.getElementById("frequencyOffset").value = frequencyOffset[i];
if ((transmission[i]).localeCompare("ON") == 0) {
document.getElementById("transmission1").checked = true;
} else {
document.getElementById("transmission2").checked = true;
}
}
}(i)));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#googleMap1 {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap1"></div>