首页 > Code > 根据数据库中宁波公园的经纬度信息在Google地图上标出每个公园的位置并连线

根据数据库中宁波公园的经纬度信息在Google地图上标出每个公园的位置并连线

2010年5月6日 Kimi 发表评论 阅读评论

数据库中含有宁波一些公园的详细信息，包括经纬度。要求将经纬度信息读取出来并调用Google Map的API服务在地图上标识出这些公园的位置。刚开始时想通过一个函数将一个buffer流写如到一个xml中并保存的，但JavaScript中调用时可能是事先预读入了，所以每次执行时都提示错误，只有当第二次这个xml真正存在时执行才会有用。为了这个问题纠结了很久结果还是不行，于是采用老师今天课堂上展示的成品中用的方法，果然奏效了。-_-||
运行效果图：

draw.:

?View Code JAVA
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@page import = "java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Airport Locator</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAATmoH83Ly9iQx1uFnEHAlDBTwM0brOpm-All5BF6PoaKBxRWWERS1Yg55rmr66zkZ8YxvBZy71GJpEw"
      type="text/javascript"></script>
<style>
	#map {
		border:		1px solid #000000;
		height:		600px;
		width:		1000px;
	}
 
</style>
<script type="text/javascript">
    //<![CDATA[
        var map;
    	var markers = [];
        var point = [];
        var i = 0;
		$(document).ready(function() {
			if (GBrowserIsCompatible()) {
				// Initialize the map.
				map = new GMap2(document.getElementById("map"));
				map.addControl(new GLargeMapControl());
				map.setCenter(new GLatLng(29.873519444400,121.554127777800), 13);
                                map.addControl(new GMapTypeControl());
                                $.ajax({type:"GET",url:"writexml.jsp",dataType:"xml",
					success:function(data,textStatus) {
						$("marker",data).each(function() {
							// Attributes for each marker.
	            			var lat = parseFloat($(this).attr("lat"));
	            			var lng = parseFloat($(this).attr("lng"));
	            			point[i] = new GLatLng(lat,lng);
 
	            			var html = $("html",this).text();
                                        //alert("Hello");
	            			// Create the marker.
	            			var marker = new GMarker(point[i]);
	            			i = i+1;
					        GEvent.addListener(marker, "click", function() {
								marker.openInfoWindowHtml(html);
					        });
 
	            			map.addOverlay(marker);
						});
                                        var polyline = new GPolyline(point, "#FF0000", 10);
                                        map.addOverlay(polyline);
					},
 
					error:function(XMLHTTPRequest,textStatus,errorThrow){
						alert("There was an error retrieving the marker information.");
					}});
			}
		});
 
		$(document.body).unload(function() {
			if (GBrowserIsCompatible()) {
				GUnload();
			}
		});
   //]]>
</script>
<div id="map"></div>
</body>
</html>


writexml.jsp(通过此文件动态构造xml):

?View Code JAVA
<%@page contentType="text/xml;charset=UTF-8"%>
<%@page import = "java.util.*"%>
<%@page language = "java" import = "java.sql.*"%>
<%
            String DBDriver="com.microsoft.jdbc.sqlserver.SQLServerDriver";
            String DBLocation="jdbc:microsoft:sqlserver://127.0.0.1:1433;DatabaseName=test";
            String DBUser="sa";
            String DBPwd="sa";
            String see = "";
            try{
                    Class.forName(DBDriver);
                    Connection conn = DriverManager.getConnection(DBLocation, DBUser, DBPwd);
 
                    Statement stmt = conn.createStatement();
                    String sql_query = "select longitude,latitude,gardenname,gardenplace from YL_Garden";
                    ResultSet rs = stmt.executeQuery(sql_query);
                    out.println("<markers>");
                    while(rs.next())
                    {
                        see=rs.getString("latitude").toString();
                        out.println("<marker lat=\"" + see + "\" ");
                        see=rs.getString("longitude").toString();
                        out.println("lng=\"" + see + "\">");
                        out.println("<html><![CDATA[");
                        see=rs.getString("gardenname").toString();
                        out.println(see + "<br/>");
                        see=rs.getString("gardenplace").toString();
                        out.println(see + "]]></html></marker>");
                    }
                    out.println("</markers>");
                    rs.close();
                    stmt.close();
                    conn.close();
                 }
                catch (Exception e) {
                    e.printStackTrace();
                }
%>
Tags: , ,
分类: Code 标签: , ,
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.