下面的是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>
分享到:
相关推荐
Google Map API是一个强大的工具,它允许开发者在网页或应用程序中集成地图功能,提供导航、定位、地理编码等服务。...通过研究这些源码,开发者能够更好地掌握如何在自己的项目中灵活运用Google Map API。
《google-map-api-example-chm-document.chm》可能包含了丰富的示例代码,涵盖了以上各种功能的实际运用,对于初学者来说是很好的学习资源。 10. **API版本更新** 谷歌地图API会定期更新,以增加新特性、优化性能...
谷歌地图API是一个强大的工具,它允许开发者在网页或应用程序中集成地图功能,提供导航、定位、地理编码、标记、信息窗口等丰富的地图交互...不断探索和实验,你会发现谷歌地图API的强大之处并能灵活运用到你的项目中。
通过这个“GoogleMapsAPIV2开发实例”,初学者能够逐步掌握如何运用谷歌地图API V2构建功能丰富的地图应用,包括但不限于地图展示、地点搜索、路线规划、用户定位等。实践中遇到问题时,可以参考官方文档、社区论坛...
<title>Google Map简单运用 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> <!-- 这里放置地址列表 --> <div id="map"> ...
- **第二步**:解压下载的文件,获取MapApi.jar包,将其放置在项目的lib或自定义的位置。 - **第三步**:打开Eclipse或Android Studio,创建一个新的Android项目。 - **第四步**:将MapApi.jar包导入项目中,确保其...
链接谷歌地图api的一段代码,用于调用google map的运用方法,可以正常的使用google地图的一些功能
本篇将深入探讨Flex版Google Map API和Flash Google Map API,帮助开发者更好地理解和运用这两种技术。 一、Flex版Google Map API Flex版Google Map API是Google为Adobe Flex开发者提供的接口,它允许开发者在Flex...
Google Map API 包含多个组件,如 JavaScript API、Static Maps API、Geocoding API 和 Directions API 等。JavaScript API 允许开发者创建动态、交互的地图,而 Static Maps API 则用于生成固定图片的地图,适用于...
本应用示例“android写的google map api 应用”是一个基于Android的Google Maps API的实践项目,可以帮助开发者更好地理解和运用这个API。 在源码“MyMap”中,我们可以学习以下几个关键知识点: 1. **集成Google ...
googleMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE); // 卫星 googleMap.setMapType(GoogleMap.MAP_TYPE_HYBRID); // 卫星+道路 googleMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN); // 地形 googleMap....
总之,Android Map API v1为开发者提供了集成谷歌地图的基础工具,尽管现在更多的开发倾向于使用更新的版本,理解v1的原理对掌握地图API的整体概念仍然有益。学习并实践这些基本概念,可以帮助开发者更好地理解和...
在Android布局文件中添加MapView组件,通过设置API密钥和初始化GoogleMap对象,可以实现在应用中展示地图。同时,可以通过调整Zoom级别来控制地图的缩放程度,使用CameraPosition和CameraUpdateFactory来改变视图...
Google Map V3是Google Maps API的一个重要版本,主要针对Web开发,提供了一整套用于在网页中集成地图、定位、路线规划等功能的工具。这个中文教程可以帮助开发者理解和运用V3版本的API,即便在无法访问互联网的情况...
谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用,包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...
在Android开发中,GoogleMap API是一个非常重要的工具,它允许开发者在应用中集成地图功能,实现定位、导航、路线规划等复杂操作。本篇将详细探讨如何在Android应用中使用GoogleMap进行定位。 首先,我们需要在项目...
在IT行业中,Google Map是一个广泛使用的在线地图服务,由谷歌公司提供。它提供了卫星图像、街景、地形图以及路线规划等功能,适用...总之,理解和熟练运用这些知识点对于成功地在项目中集成并调试Google Map至关重要。
《Android NDK与GoogleMap集成应用详解》 在Android开发领域,NDK(Native Development Kit)和Google Map API是两个非常重要的技术。NDK提供了一种方式,让开发者可以使用C/C++原生代码来编写部分应用,以提高性能...
标题"运用AJAX实现的一个简单的google Map 程序 附源码 经典"表明这是一个使用AJAX技术构建的、基于Google Maps API的简单应用程序。这个程序具有教学或示例性质,因为“经典”一词常常用于描述值得学习和参考的代码...
在本文中,我们将深入探讨如何在VC++项目中调用Google Maps API,以便在应用程序中集成地图功能。Google Maps API提供了丰富的地图展示、定位、路径规划等服务,开发者可以通过API来实现各种定制化的地图应用。 ...