首页 > Code > Google地图API应用:根据宁波各公园经纬度值在地图上作标记,并连线

Google地图API应用:根据宁波各公园经纬度值在地图上作标记,并连线

2010年5月7日 发表评论 阅读评论 1,001 views

在gardenlist数据库中存有各个公园的名称地址信息以及经纬度,由gardenlist.jsp从数据库中取出数据并生成xml形式,通过ajax在gardenlistlocate.jsp中调用并标记到地图中。

效果图:

google_map_gardenlist_1 google_map_gardenlist_2google_map_gardenlist_3

 

源代码:

inc1.jsp

<%@ page language="java" import ="java.util.*"%>
 
<%
	// for SQL Server 2008/2005
	String DBDriver="com.microsoft.sqlserver.jdbc.SQLServerDriver";
	String DBLocation="jdbc:sqlserver://localhost:1433;DatabaseName=gardenlist";
	String DBUser="sa";
	String DBPwd="";
 
        //for SQL Server 2000
        /*
        String DBDriver="com.microsoft.jdbc.sqlserver.SQLServerDriver";
	String DBLocation="jdbc:microsoft:sqlserver://127.0.0.1:1433;DatabaseName=gardenlist";
	String DBUser="sa";
	String DBPwd="sa";
         */
%>

gardenlist.jsp

<%-- 
    Document   : gardenlist
    Created on : 2010-5-6, 20:47:49
    Author     : timmy
--%>
 
<%@page contentType="text/xml" pageEncoding="UTF-8"%>
<%@page import="java.util.*"%>
<%@page language="java" import="java.sql.*"%>
<%@include file="inc1.jsp"%>
<%!
    public static String returnToBr(String sStr) {
 
        if (sStr == null || sStr.equals("")) {
            return "";
        } else { //原数据取出带有"",这里将""去掉
            sStr = sStr.substring(1, sStr.length() - 1);
        }
        return sStr.trim();
    }
 
%>
<markers>
    <%
        try{
            Class.forName(DBDriver);
            Connection conn = DriverManager.getConnection(DBLocation, DBUser, DBPwd);
            Statement stmt = conn.createStatement();
            ResultSet rs = stmt.executeQuery("select * from yl_garden");
            while(rs.next()){
    %>
    <marker lat="<%=rs.getString("latitude")%>" lng="<%=rs.getString("longitude")%>">
        <html><![CDATA[
            <%=returnToBr(rs.getString("gardenname"))%><br/> <%=returnToBr(rs.getString("gardenplace"))%>	]]></html>
    </marker>
    <%
 
            }
            rs.close();
            stmt.close();
            conn.close();
            }catch(Exception ex){
                ex.printStackTrace();
            }
 
    %>
</markers>

gardenlistlocate.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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>Gardenlist Locate</title>
 
 
<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 = [];
 
		$(document).ready(function() {
			if (GBrowserIsCompatible()) {
				// Initialize the map.
				map = new GMap2(document.getElementById("map"));
				map.addControl(new GLargeMapControl());
				map.setCenter(new GLatLng(29.886615,121.566467), 13);
                                map.addControl(new GMapTypeControl());
                                var i=0;
                                var point = [];
 
				//$.ajax({type:"GET",url:"markers.xml",dataType:"xml",
                                $.ajax({type:"GET",url:"gardenlist.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();
 
                                            // Create the marker.
                                            var marker = new GMarker(point[i]);
 
					        GEvent.addListener(marker, "click", function() {
								marker.openInfoWindowHtml(html);
					        });
                                             i++;
                                             map.addOverlay(marker);
						});
					},
 
                                        complete:function(){
                                            var polyline = new GPolyline(point, "#0099ff", 5);
                                            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>
 
</head>
<body>
<div id="map"></div>
</body>
</html>
分类: Code 标签: , ,
  1. 2010年5月13日00:35 | #1

    谷歌地图和卫星照片不重合…

    timmy Reply:

    @JasonChao, 这是地图偏移,“据说”是为了防导弹攻击- -||

  2. spurity
    2011年5月26日15:34 | #2

    可以把这个源代码发给我一份么??万分感谢

  3. spurity
    2011年5月26日15:41 | #3

    我邮箱是:heyin.swust@yahoo.com.cn

  1. 本文目前尚无任何 trackbacks 和 pingbacks.

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :cool: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O