存档

文章标签 ‘map’

根据数据库中宁波公园的经纬度信息在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>

阅读全文…

Tags: , ,
分类: Code 标签: , ,