Google Map ApI 的简单运用（二）
下面的是Google Map地图异步加载 （通过js）和 通过查询获取后台经纬度数据 并且点与点之间用折线链接显示。
参考的是Google Map ApI 官方网址
这是我的mapSearch.js文件，这中间运用了DWR，JQuery。
$().ready(function(){
loadScript();
$('#empNo').val('');
});
var map;
var markerOptions;
function load() {
map = new GMap2(document.getElementById("map"));
if (GBrowserIsCompatible()) {
// map.addControl(new GSmallMapControl());//却掉了恢复和滑块
map.addControl(new GLargeMapControl());//大的缩略图控件
map.addControl(new GMapTypeControl());//地图模式
map.addControl(new GOverviewMapControl());//右下角缩略图
//map.addControl(new GScaleControl());//地图比例尺
map.removeMapType(G_HYBRID_MAP);//去除混合地图模式
map.enableScrollWheelZoom(); //开启滚轮伸缩效果－－鼠标滚轮向前滚放大地图，反之缩小
//map.setCenter(new GLatLng(39.9693, 116.4170), 13);
map.setCenter(new GLatLng(31.14,121.29), 13);
}
else
{
alert('你使用的浏览器不支持 Google Map!');
}
}
//判断输入的工号是否存在
function checkempNo (){
var isExist=dbwtool.callDWRSync('MapSearchDWR.checkempNo',[$('#empNo').val()]);
if(isExist==false){
alert("该业务员工号不存在存在，请重新输入！");
$('#empNo').val('');
}
}
//创建有弹出信息框窗口的 Marker
function createMarker(point, content) {
var blueIcon = new GIcon(G_DEFAULT_ICON);
//blueIcon.image = "http://localhost:8080/hs/image/admin/btn_save.gif";//更换Marker图标
markerOptions = { icon:blueIcon };
var marker = new GMarker(point,markerOptions);
var html = content ;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//查询操作
function doSearch(){
var empNo=$('#empNo').val();
if(empNo!=""){
var o = dbwtool.callDWRBusiness('MapSearchDWR.getLatitudelongitudes',[empNo]);
load();//作用是在查询第二次，把前一次的加载的标记清掉 归为第一次加载的地图，这样地图不会 重叠
if(o){
var points=[];//定义一个 数组大小不确定
for (var i=0;i<o.length;i++){
var latitude=parseFloat(o[i].latitude);
var longitude=parseFloat(o[i].longitude);
var point=new GLatLng(latitude,longitude);
points[i]=point;
var content="客户姓名:"+o[i].customerName+"<br>客户地址:"+o[i].address+"</br>"+"<br>客户电话:"+o[i].phone+"</br>"+"</br>"+"<br>购买数量电话:"+o[i].buyAmount+"</br>";
var marker = createMarker(point, content);
map.addOverlay(marker);
}
//var polyline = new GPolyline([points[0],points[1],points[2]], "#ff0000", 8);
var polyline = new GPolyline(points, "#ff0000", 8);
map.panTo(points[0]);//这一句很重要，作用是移动地图中心位置
map.addOverlay(polyline);
}
else{
alert("没有数据！");
$('#empNo').val('');
return false;
}
}
else{
alert("请输入业务员工号！");
return false;
}
}
//下面该方法是异步夹杂Google Map 注意 两个参数 asyns，callback
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAiWserKTZU9nXfUSx4Ei4RRSY6Rp_dtTyQN4GkMrKIoAukNIPFxRDWpNdSMTrO1knJiSNHRXJdBcZSA&async=2&callback=load";
document.body.appendChild(script);
}
我的mapSearch.jsp文件：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../common/comtop.jsp"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W<chmetcnv unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0" w:st="on">3C</chmetcnv>//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>地图——地图查询</title>
<link rel="stylesheet" type="text/css" href="<%=ctxPath%>/themes/default/dtree.css" />
<link rel="stylesheet" type="text/css" href="<%=ctxPath%>/themes/default/tooltip.css" />
<script type="text/javascript" src="<%=ctxPath%>/js/common/dbwtool.js"></script>
<script type="text/javascript" src="<%=ctxPath%>/js/common/dtree_c.js"></script>
<script type="text/javascript" src="<%=ctxPath%>/js/map/mapSearch.js"></script>
<script type='text/javascript' src="<%=ctxPath%>/dwr/interface/MapSearchDWR.js"></script>
<script type='text/javascript' src="<%=ctxPath%>/dwr/engine.js"></script>
<script type="text/javascript">
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div class="titleBar">
<span style="float: left;">地图-地图查询</span><br/>
<span style="float: right"></span>
</div>
<s:form id="mainForm" name="mainForm" action="mapSearch" namespace="/map" method="post">
<div class="panel" id="search">
<table class="panel">
<thead>
<tr>
<td>业务员工号 <input type="text" id="empNo" onblur="checkempNo()" ></td>
<td><a href="#" onClick="doSearch();return false;"><img src='<%=ctxPath%>/image/admin/btn_search.gif'/>查询</a></td>
</tr>
</thead>
</table>
</div>
<div id="map" align="center" style="width: 1300px; height: 350px">
</div>
</s:form>
</body>
</html>