最近在弄google map api 的东西,在弄一个自定义er 图标。 现在就是上传er图标的图片后,不管怎么刷新页面,图标都不改变,一定要关掉浏览器之后重开,图标才改变。我觉得可能跟浏览器缓存或者之类的有关,但是也弄不明白。
现在想请问下,如果我要实现上传图标后程序刷新页面图标能改变,如何才能实现?谢谢
我的程序如下:
<style type="text/css">
#Preview
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style> <%
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver")
.newInstance();
String url = "jdbc:sqlserver://localhost:1433;DatabaseName=image";
String user = "sa";
String password = "sa";
Connection conn = DriverManager.getConnection(url, user, password);
Statement stmt = conn.createStatement(); String sql = "select * from img_info"; //img_info info = new img_info(); ResultSet rs = stmt.executeQuery(sql); ArrayList<String> lis_nam = new ArrayList<String>();
ArrayList<Double> lis_lat = new ArrayList<Double>();
ArrayList<Double> lis_lon = new ArrayList<Double>();
ArrayList<String> lis_address = new ArrayList<String>(); for (int i = 0; rs.next(); i++) { lis_nam.add(rs.getString("img_name"));
lis_lat.add(rs.getDouble("img_lat"));
lis_lon.add(rs.getDouble("img_lon"));
lis_address.add(rs.getString("img_address")); } int size = lis_nam.size();
String[] nam = (String[]) lis_nam.toArray(new String[size]);
Double[] lat = (Double[]) lis_lat.toArray(new Double[size]);
Double[] lon = (Double[]) lis_lon.toArray(new Double[size]);
String[] address = (String[]) lis_address.toArray(new String[size]);
%> <script type="text/javascript">
var infowindow;
(function() { google.maps.Map.prototype.ers = new Array(); google.maps.Map.prototype.addMarker = function(er) {
this.ers[this.ers.length] = er;
}; google.maps.Map.prototype.getMarkers = function() {
return this.ers
}; google.maps.Map.prototype.clearMarkers = function() {
if (infowindow) {
infowindow.close();
} for ( var i = 0; i < this.ers.length; i++) {
this.ers[i].set_map(null);
}
};
})();function initialize() {
var latlng = new google.maps.LatLng(50.9406645, 6.9599115);
var myOptions = {
zoom : 12,
center : latlng,
streetViewControl : false, //not allow the little man shown on the map
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var tef = "<%=nam[0]%>";
var a = new Array();
var k=0;<%for (int i = 0; i < size; i++) {%>
var t = new Object();
t.name = "<%=nam[i]%>"
t.lat = <%=lat[i]%>
t.lng = <%=lon[i]%>
a[k] = t;
k++
<%}%>
for ( var i = 0; i < a.length; i++) {
var latlng = new google.maps.LatLng(a[i].lat, a[i].lng);
map.addMarker(createMarker(a[i].name, latlng));
}
console.log(map.getMarkers()); console.log(map.getMarkers());
}
var =''; //set a variable of icon//this function is to change the icon address
function selectIcon(imgFile){
var newPreview = document.getElementById("Preview");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.style.width = "80px";
newPreview.style.height = "80px";
}
//change the icon picture
function changeIcon(){
<%
String ima=request.getParameter("image");
try{
String pathi=request.getRealPath("/");
File outputFile =null;
//out.print("image path is"+ima);
File inputFile = new File(ima);
BufferedImage input = ImageIO.read(inputFile);
//转换为png格式的图片
outputFile = new File(pathi+"/icon/icon.png");
ImageIO.write(input, "PNG", outputFile);
}
catch(Exception e)
{
System.out.print(e.toString());
}
%>
}function createMarker(name, latlng) {
var er = new google.maps.Marker( {
position : latlng,
icon : 'icon/icon.png', //change the icon of the
map : map
});
google.maps.event.addListener(er, "click", function() {
if (infowindow)
infowindow.close();
infowindow = new google.maps.InfoWindow(); //window.alert(name);
infowindow.setContent(name+'缩略图位置<a href="get.jsp?name='+name+'"><image src="img/'+name+'_s.jpg" border="0"/></a>');
infowindow.open(map, er);
});
return er;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 50%; height: 400px; float: left;"></div>
<br style="clear: both;" />
<button onclick="map.clearMarkers();">
clear
</button>
<br />
<FORM METHOD=POST action="11.jsp">
<p>请选择一个图片进行预览:<input type="file" size="20" name="image" onchange="javascript:selectIcon(this);" /></p>
<div id="Preview"></div>
<INPUT TYPE="submit" onclick="javascript:changeIcon();initialize()" value="提交">
</FORM>
<INPUT TYPE="submit" onclick="javascript:window.location.href=window.location.href;" value="提">
</body>
</html>
现在想请问下,如果我要实现上传图标后程序刷新页面图标能改变,如何才能实现?谢谢
我的程序如下:
<style type="text/css">
#Preview
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style> <%
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver")
.newInstance();
String url = "jdbc:sqlserver://localhost:1433;DatabaseName=image";
String user = "sa";
String password = "sa";
Connection conn = DriverManager.getConnection(url, user, password);
Statement stmt = conn.createStatement(); String sql = "select * from img_info"; //img_info info = new img_info(); ResultSet rs = stmt.executeQuery(sql); ArrayList<String> lis_nam = new ArrayList<String>();
ArrayList<Double> lis_lat = new ArrayList<Double>();
ArrayList<Double> lis_lon = new ArrayList<Double>();
ArrayList<String> lis_address = new ArrayList<String>(); for (int i = 0; rs.next(); i++) { lis_nam.add(rs.getString("img_name"));
lis_lat.add(rs.getDouble("img_lat"));
lis_lon.add(rs.getDouble("img_lon"));
lis_address.add(rs.getString("img_address")); } int size = lis_nam.size();
String[] nam = (String[]) lis_nam.toArray(new String[size]);
Double[] lat = (Double[]) lis_lat.toArray(new Double[size]);
Double[] lon = (Double[]) lis_lon.toArray(new Double[size]);
String[] address = (String[]) lis_address.toArray(new String[size]);
%> <script type="text/javascript">
var infowindow;
(function() { google.maps.Map.prototype.ers = new Array(); google.maps.Map.prototype.addMarker = function(er) {
this.ers[this.ers.length] = er;
}; google.maps.Map.prototype.getMarkers = function() {
return this.ers
}; google.maps.Map.prototype.clearMarkers = function() {
if (infowindow) {
infowindow.close();
} for ( var i = 0; i < this.ers.length; i++) {
this.ers[i].set_map(null);
}
};
})();function initialize() {
var latlng = new google.maps.LatLng(50.9406645, 6.9599115);
var myOptions = {
zoom : 12,
center : latlng,
streetViewControl : false, //not allow the little man shown on the map
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var tef = "<%=nam[0]%>";
var a = new Array();
var k=0;<%for (int i = 0; i < size; i++) {%>
var t = new Object();
t.name = "<%=nam[i]%>"
t.lat = <%=lat[i]%>
t.lng = <%=lon[i]%>
a[k] = t;
k++
<%}%>
for ( var i = 0; i < a.length; i++) {
var latlng = new google.maps.LatLng(a[i].lat, a[i].lng);
map.addMarker(createMarker(a[i].name, latlng));
}
console.log(map.getMarkers()); console.log(map.getMarkers());
}
var =''; //set a variable of icon//this function is to change the icon address
function selectIcon(imgFile){
var newPreview = document.getElementById("Preview");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.style.width = "80px";
newPreview.style.height = "80px";
}
//change the icon picture
function changeIcon(){
<%
String ima=request.getParameter("image");
try{
String pathi=request.getRealPath("/");
File outputFile =null;
//out.print("image path is"+ima);
File inputFile = new File(ima);
BufferedImage input = ImageIO.read(inputFile);
//转换为png格式的图片
outputFile = new File(pathi+"/icon/icon.png");
ImageIO.write(input, "PNG", outputFile);
}
catch(Exception e)
{
System.out.print(e.toString());
}
%>
}function createMarker(name, latlng) {
var er = new google.maps.Marker( {
position : latlng,
icon : 'icon/icon.png', //change the icon of the
map : map
});
google.maps.event.addListener(er, "click", function() {
if (infowindow)
infowindow.close();
infowindow = new google.maps.InfoWindow(); //window.alert(name);
infowindow.setContent(name+'缩略图位置<a href="get.jsp?name='+name+'"><image src="img/'+name+'_s.jpg" border="0"/></a>');
infowindow.open(map, er);
});
return er;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 50%; height: 400px; float: left;"></div>
<br style="clear: both;" />
<button onclick="map.clearMarkers();">
clear
</button>
<br />
<FORM METHOD=POST action="11.jsp">
<p>请选择一个图片进行预览:<input type="file" size="20" name="image" onchange="javascript:selectIcon(this);" /></p>
<div id="Preview"></div>
<INPUT TYPE="submit" onclick="javascript:changeIcon();initialize()" value="提交">
</FORM>
<INPUT TYPE="submit" onclick="javascript:window.location.href=window.location.href;" value="提">
</body>
</html>
this.ers[i].set_map(null);
}里的 set_map改为 setMap我用的是V3版,测试通过