数据库表设计
此例只显示点标记经纬度坐标与点名称,因此以下代码只使用到NAME,X,Y字段:
数据库连接
数据库使用的是mysql:
// test为数据库名,root账号名,123为密码
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","123");
Statement stat=conn.createStatement();
数据库查询信息
mysql语句
// 查询语句
String sql="SELECT * FROM test";//查询sql语句
ResultSet rs=stat.executeQuery(sql);//返回结果集
读取数据库信息
// 读取数据库信息
List<String> list_x = new ArrayList<String>();
List<String> list_y = new ArrayList<String>();
List<String> list_name = new ArrayList<String>();
while(rs.next())
{
list_x.add(rs.getString("X"));
list_y.add(rs.getString("Y"));
list_name.add(rs.getString("NAME"));
}
if(list_x != null)
{
String[][]arr = new String[list_x.size()][2];
String[]arr1=new String[list_name.size()];
%>
var lnglats = new Array();
var name=new Array();
<%
for (int i=0;i<list_x.size();i++)
{
arr[i][0] = list_x.get(i);
arr[i][1] = list_y.get(i);
arr1[i] = list_name.get(i);
%>
lnglats[<%=i%>] =[];
lnglats[<%=i%>][0] = <%=arr[i][0]%>;
lnglats[<%=i%>][1] = <%=arr[i][1]%>;
name[<%=i%>]='<%=arr1[i]%>';
<%
}
}
%>
将从数据库获取的信息绘制到地图上
//点标记与信息窗体的创建与添加
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30)
});
for (var i = 0, marker; i < lnglats.length; i++) {
var marker = new AMap.Marker({
position: lnglats[i],
name:name[i],
map: map
});
marker.content = '<div><h3>名称:'+name[i]+'</h3></div>';
marker.content += '<div>经度:'+lnglats[i][0]+'</div>';
marker.content += '<div>纬度:'+lnglats[i][1]+'</div>';
marker.on('mouseover', infoOpen);
//注释后打开地图时默认关闭信息窗体
marker.on('mouseout', infoClose);
marker.on('click', newMAp);
}
function newMAp(e) {
map.setZoomAndCenter(15, e.target.getPosition());
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
function infoClose(e) {
infoWindow.close(map, e.target.getPosition());
}
function infoOpen(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
function closeInfoWindow() {
map.clearInfoWindow();
};
效果
下图为编译器自带浏览器显示效果
问题
使用谷歌浏览器查看效果时 名称显示为 undefined