`

Google Map ApI 的简单运用(二)

阅读更多

下面的是Google Map地图异步加载 (通过js)和 通过查询获取后台经纬度数据 并且点与点之间用折线链接显示。

参考的是Google Map ApI 官方网址

 

 

这是我的mapSearch.js文件,这中间运用了DWRJQuery。

 

 

$().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 注意 两个参数 asynscallback

 

 

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。

    google map api 及范例

    《google-map-api-example-chm-document.chm》可能包含了丰富的示例代码,涵盖了以上各种功能的实际运用,对于初学者来说是很好的学习资源。 10. **API版本更新** 谷歌地图API会定期更新,以增加新特性、优化性能...

    google地图API实现的一个简单demo

    谷歌地图API是一个强大的工具,它允许开发者在网页或应用程序中集成地图功能,提供导航、定位、地理编码、标记、信息窗口等丰富的地图交互...不断探索和实验,你会发现谷歌地图API的强大之处并能灵活运用到你的项目中。

    google map api v2开发实例

    通过这个“GoogleMapsAPIV2开发实例”,初学者能够逐步掌握如何运用谷歌地图API V2构建功能丰富的地图应用,包括但不限于地图展示、地点搜索、路线规划、用户定位等。实践中遇到问题时,可以参考官方文档、社区论坛...

    Google map简单运用

    &lt;title&gt;Google Map简单运用 &lt;script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer&gt;&lt;/script&gt; &lt;!-- 这里放置地址列表 --&gt; &lt;div id="map"&gt; ...

    android map api 介绍

    - **第二步**:解压下载的文件,获取MapApi.jar包,将其放置在项目的lib或自定义的位置。 - **第三步**:打开Eclipse或Android Studio,创建一个新的Android项目。 - **第四步**:将MapApi.jar包导入项目中,确保其...

    google map api code

    链接谷歌地图api的一段代码,用于调用google map的运用方法,可以正常的使用google地图的一些功能

    google map for flex

    本篇将深入探讨Flex版Google Map API和Flash Google Map API,帮助开发者更好地理解和运用这两种技术。 一、Flex版Google Map API Flex版Google Map API是Google为Adobe Flex开发者提供的接口,它允许开发者在Flex...

    map api

    Google Map API 包含多个组件,如 JavaScript API、Static Maps API、Geocoding API 和 Directions API 等。JavaScript API 允许开发者创建动态、交互的地图,而 Static Maps API 则用于生成固定图片的地图,适用于...

    android写的google map api 应用.zip

    本应用示例“android写的google map api 应用”是一个基于Android的Google Maps API的实践项目,可以帮助开发者更好地理解和运用这个API。 在源码“MyMap”中,我们可以学习以下几个关键知识点: 1. **集成Google ...

    Android的mapApi

    googleMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE); // 卫星 googleMap.setMapType(GoogleMap.MAP_TYPE_HYBRID); // 卫星+道路 googleMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN); // 地形 googleMap....

    Android-Google-Map-APi.doc.zip_android_google map android

    总之,Android Map API v1为开发者提供了集成谷歌地图的基础工具,尽管现在更多的开发倾向于使用更新的版本,理解v1的原理对掌握地图API的整体概念仍然有益。学习并实践这些基本概念,可以帮助开发者更好地理解和...

    android google map 应用

    在Android布局文件中添加MapView组件,通过设置API密钥和初始化GoogleMap对象,可以实现在应用中展示地图。同时,可以通过调整Zoom级别来控制地图的缩放程度,使用CameraPosition和CameraUpdateFactory来改变视图...

    GoogleMap V3 中文 教程

    Google Map V3是Google Maps API的一个重要版本,主要针对Web开发,提供了一整套用于在网页中集成地图、定位、路线规划等功能的工具。这个中文教程可以帮助开发者理解和运用V3版本的API,即便在无法访问互联网的情况...

    googleMap V3 中文API

    谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用,包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...

    android GoogleMap定位(四)

    在Android开发中,GoogleMap API是一个非常重要的工具,它允许开发者在应用中集成地图功能,实现定位、导航、路线规划等复杂操作。本篇将详细探讨如何在Android应用中使用GoogleMap进行定位。 首先,我们需要在项目...

    google map debug

    在IT行业中,Google Map是一个广泛使用的在线地图服务,由谷歌公司提供。它提供了卫星图像、街景、地形图以及路线规划等功能,适用...总之,理解和熟练运用这些知识点对于成功地在项目中集成并调试Google Map至关重要。

    AndroidNDK.rar_GoogleMap_android

    《Android NDK与GoogleMap集成应用详解》 在Android开发领域,NDK(Native Development Kit)和Google Map API是两个非常重要的技术。NDK提供了一种方式,让开发者可以使用C/C++原生代码来编写部分应用,以提高性能...

    运用AJAX实现的一个简单的google Map 程序 附源码 经典

    标题"运用AJAX实现的一个简单的google Map 程序 附源码 经典"表明这是一个使用AJAX技术构建的、基于Google Maps API的简单应用程序。这个程序具有教学或示例性质,因为“经典”一词常常用于描述值得学习和参考的代码...

    VC++调用GOOGLEMAP(google地图)代码

    在本文中,我们将深入探讨如何在VC++项目中调用Google Maps API,以便在应用程序中集成地图功能。Google Maps API提供了丰富的地图展示、定位、路径规划等服务,开发者可以通过API来实现各种定制化的地图应用。 ...

Global site tag (gtag.js) - Google Analytics