设为首页优惠IDC收藏本站六狼博客六狼论坛
开启辅助访问 切换到窄版

六狼论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

新浪微博账号登陆

只需一步，快速开始

搜索
六狼论坛»首页 › WEB前端 › JavaScript › Google Map ApI 的简单运用（二）
返回列表 发新帖
查看: 21|回复: 0

Google Map ApI 的简单运用（二）

[复制链接]
Peteryang杨

升级  4.67%

13

主题

13

主题

13

主题

秀才

Rank: 2

积分
57
 楼主| 发表于 2013-1-29 08:56:11 | 显示全部楼层 |阅读模式
下面的是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.latitude);

 
 
  var longitude=parseFloat(o.longitude);  

 
 
  var point=new GLatLng(latitude,longitude);

 
 
  points=point;

 
 
  var content="客户姓名:"+o.customerName+"<br>客户地址:"+o.address+"</br>"+"<br>客户电话:"+o.phone+"</br>"+"</br>"+"<br>购买数量电话:"+o.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>   



 
 
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表