JavaScript高德地图API之调用数据库数据绘制点标记与信息窗体

数据库表设计

此例只显示点标记经纬度坐标与点名称，因此以下代码只使用到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