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> 
?
?
