下面的是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>
分享到:
相关推荐
链接谷歌地图api的一段代码,用于调用google map的运用方法,可以正常的使用google地图的一些功能
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
googleAPI的运用,可以实现搜索,和路线查询。
这是一个用java编写的andriod手机平台的软件,运用googlemap开源API
(2)目前国际最先进的网络GIS—————Google Map其二次开发的关键技术; 7、GM开发实例:如果感兴趣,还可以详细演示说明根据GM机制,自行开发webgis介绍一下基于Google Map这种机制,国内一些主要的软件和网站 8...
全球定位系统(Global Positioning System,GPS),是一个中距离圆型轨道卫星导航系统,可以为...以经纬度和半径规划一个区域,当设备进入给区域,发出提醒信息,还可以和Google Map API一起使用,完成更多的任务。 关
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 ...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
9.5 GPSGoogle地图——LocationListener与MapView实时更新 9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
特点:Google Earth凭借其强大的技术实力和经验,以其操作简单、用户体验超群的优势吸引了全球近十分之一的人口使用。 发展历程:Google于2004年10月收购了Keyhole公司,随之次年6月推出Google Earth系列软件。...
然而由于众多出入口,往往导致人们出行的困扰,本文以Android为开发平台,以区域电子地图为基础开发了地铁出口导航系统,实现了地铁站各站点出口及周边道路、公交信息等的查询, 并通过集成SQLite及Google Map实现...
随着大数据2.0时代悄然到来,大数据从简单的批处理扩展到了实时处理、流处理、交互式查询和机器学习应用。早期的处理模型(Map/Reduce)早已经力不从心,而且也很难应用到处理流程长且复杂的数据流水线上。另外,近年...