Google Map ApI 的简单运用（二）

最新推荐文章于 2024-07-26 11:41:15 发布

spaceman

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量81

点赞数

分类专栏：开源文章标签： javascript ViewUI

开源专栏收录该内容

9 篇文章 0 订阅

订阅专栏

下面的是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>

</script>

</head>

</div>

<s:form id="mainForm" name="mainForm" action="mapSearch" namespace="/map" method="post">

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

</s:form>

</body>

</html>

spaceman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google Map ApI 的简单运用（二）

下面的是Google Map地图异步加载（通过js）和通过查询获取后台经纬度数据并且点与点之间用折线链接显示。参考的是Google Map ApI 官方网址这是我的mapSearch.js文件，这中间运用了DWR，JQuery。 $().ready(function(){ loadScript(); $('#empNo')....
复制链接

扫一扫

专栏目录