HTML代码:
<g:form method="post" name="mapForm">
<div id="map_canvas" style="height:480px;width:1170px;"></div>
<table>
<tr>
<td width="70">纬度(lat):<input type="text" id="latMap" name="lat" value="${params.lat}"/></td>
<td width="70">经度(lng):<input type="text" id="lngMap" name="lng" value="${params.lng}"/></td>
<td width="20"><input type="button" value="定位" onclick="searchPosition('手动定位','',17);"/></td>
<td width="130"><input type="button" value="确定经纬度" onclick="saveLatLng();"/></td>
</tr>
<tr>
<td colspan="3"><input type="text" id="districtNameMap" name="districtName" style="width:200px;" value="${(params.districtName ?
params.districtName?.encodeAsHTML() : '') + ' ' + (params.address ? params.address?.encodeAsHTML() : '')}"/>
<input type="button" value="查找定位" onclick="doQuery('${params.city}');" style="margin-left:20px;"/>
<input type="button" value="关闭" onclick="closeWindow();"); style="margin-left:20px;""/></td>
</tr>
<tr>
<td>Google地图查询结果: </td>
</tr>
<tr style="border: 2px solid green;">
<td width="100">名字</td>
<td width="100">地址</td>
<td width="50">经度</td>
<td width="50">纬度</td>
<td width="100">简介</td>
</tr>
<tbody id="QueryResult">
<tr>
<td colspan="5" style="text-align:center;">你可以在文本框中输入查找的内容,然后进行查找!</td>
</tr>
</tbody>
</table>
</g:form>
javascript代码:
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAjrjne0F4cDKBgaXboSUEOBRWwYZIMkjMkdGEIrpMX7NJb53ndhTkcNJtXRLU7giBxFxOukNWOgy-3A&hl=zh-CN" type="text/javascript"></script>
<script language="javascript" type="text/javascript"><!--
var map;
function saveLatLng() {
if (confirm('你确定要设置小区的经纬度吗?')) {
var lat = jQuery('#latMap').val().replace('.', '').substring(0,9);
var lng = jQuery('#lngMap').val().replace('.', '').substring(0,10);
jQuery('#lat').val(lat);
jQuery('#lng').val(lng);
}
}
function loadMap(lat, lng, name, address) {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
searchPosition(name, address, 13);
var smallMapControl = new GSmallMapControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(smallMapControl, topRight);
GEvent.addListener(map, "dblclick", function() {
map.removeControl(smallMapControl);
map.addControl(new GSmallMapControl(), bottomRight);
});
GEvent.addListener(map, "click", function(marker, point) {
jQuery('#latMap').val(point.lat());
jQuery('#lngMap').val(point.lng());
});
}
}
function searchPosition(name, address, level) {
var lat = jQuery('#latMap').val();
var lng = jQuery('#lngMap').val();
map.setCenter(new GLatLng(lat,lng), level);
var ele = document.createElement("DIV");
ele.innerHTML = name + "<br/>" + address;
map.openInfoWindow(map.getCenter(),ele);
}
function doQuery(city) {
var data = '&city=' + city + '&districtName=' + jQuery('#districtNameMap').val();
jQuery.ajax({
type: "POST",
url: "${createLink(controller:'districtLocation', action:'fetchGoogleCode')}",
data: data,
dataType: 'json',
success: function(response){
if (isNeedReLogin(response)) {//登录超时
window.location = "${request.contextPath}/login/auth";
} else if (isForbidden(response)) {//权限不够
window.location = "${request.contextPath}/login/denied";
} else {
if (response.message == '200') {
eval("ajaxQueryResult="+response.html);
doSetValues(ajaxQueryResult);
} else {
alert(response + ',抱歉!保存失败,请重试!');
}
}
},
error: function(response) {
alert(response);
}
});
}
function doSetValues(ajaxQueryResult){
var tbody = document.getElementById('QueryResult');
for(var i=tbody.rows.length-1;i>=0;i--){
tbody.deleteRow(i);
}
for(var i=0;i<ajaxQueryResult.length;i++){
var row = tbody.insertRow(i);
var cell = row.insertCell(0);
cell.innerHTML = "<a href=\"javascript:SetLatLng("+ajaxQueryResult[i].lat+","+ajaxQueryResult[i].lng+",'"+ajaxQueryResult
[i].name+"','"+ajaxQueryResult[i].address+"')\">"+ajaxQueryResult[i].name+"</a>";
cell = row.insertCell(1);
cell.innerHTML = ajaxQueryResult[i].address;
cell = row.insertCell(2);
cell.innerHTML = ajaxQueryResult[i].lng;
cell = row.insertCell(3);
cell.innerHTML = ajaxQueryResult[i].lat;
cell = row.insertCell(4);
cell.innerHTML = ajaxQueryResult[i].snippet;
}
if(ajaxQueryResult.length == 0){
var row = tbody.insertRow(0);
var cell = row.insertCell(0);
cell.algin="center";
cell.colSpan=5;
cell.innerHTML = "没有找到你想要的结果!";
}
}
Groovy代码:
def fetchGoogleCode = {
public static Pattern PARSE_PATTERN = Pattern.compile("<Placemark><name>([^<]+)|<Snippet><!\\[CDATA\\[([^\\]]+)|<address>([^<]+)|<coordinates>([^<]+)");
String url = 'http://ditu.google.cn/maps?f=q&hl=zh-CN&geocode=&q=' + URLEncoder.encode(params.city + ' ' + params.districtName,"UTF-8") + '&btnG=%E6%90%
9C%E7%B4%A2%E5%9C%B0%E5%9B%BE&output=kml';
StringBuffer result = new StringBuffer("[");
int c = 0;
try{
def content = '';
HttpURLConnection conn = null;
try {
conn = (HttpURLConnection) (new URL(url).openConnection());
BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream(),"UTF-8"));
String tmp = null;
StringBuffer buffer = new StringBuffer();
while( (tmp = reader.readLine()) != null){
buffer.append(tmp);
}
content = buffer.toString();
} finally {
if (null != conn)
conn.disconnect();
}
Matcher m = PARSE_PATTERN.matcher(content);
while(m.find()){
switch(c % 4){
case 0:
result.append("\r\n{name:\"");
result.append(m.group(1));
result.append("\",");
break;
case 1:
def snippet = m.group(2);
snippet = snippet?.replaceAll("[\\r\\n]","<br/>");
snippet = snippet?.replaceAll("[\"]","'");
result.append("snippet:\"");
result.append(snippet);
result.append("\",");
break;
case 2:
result.append("address:\"");
result.append(m.group(3));
result.append("\",");
break;
case 3:
String s = m.group(4);
String[] a = s.split(',');
result.append("lng:\"");
result.append(a[0]);
result.append("\",lat:\"");
result.append(a[1]);
result.append("\"},");
break;
}
c++;
}
}catch(Exception e){
}
if(c > 0 && c % 4 == 0){
result = result.deleteCharAt(result.length()-1);
result.append("\r\n];");
}else{
result = new StringBuffer("[];");
}
def jsonResult = [:]
jsonResult.message = '200'
println result.toString()
jsonResult.html = result.toString()
render jsonResult as JSON
}
--></script>
分享到:
相关推荐
这个插件将Google Maps的强大功能与Vue的声明式渲染相结合,为开发者提供了更方便的方式来创建交互式的地图应用。下面将详细介绍Vue2googlemap的关键特性和使用方法。 1. **安装与配置** 安装Vue2googlemap通常...
在IT行业中,谷歌地图(Google Maps)是一款广泛应用于各种web和移动应用的地理信息系统,它提供了丰富的地图数据、导航功能以及API,使得开发者能够轻松地集成地图服务到自己的项目中。这个“完整的谷歌地图工程,...
获取API密钥,这是连接你的应用与Google Maps服务的关键。将密钥添加到你的JSP页面中,以便API能够正确加载和运行。 在`GoogleMapsExample`这个压缩包文件中,可能包含了以下内容: 1. JSP文件:这是主页面,包含...
"firemonkey打开Google地图"这个话题涉及到如何在FireMonkey应用中集成并使用Google Maps服务。下面我们将深入探讨这个主题。 首先,FireMonkey(FMX)是Delphi和C++Builder中的一个UI框架,它允许开发者用相同的...
Google Earth(简称GE)是Google公司于2005年推出的卫星影像软件,用户可以通过网络访问包含航空与卫星图片的海量数据库,获取实时地理信息。GE采用的平面坐标系统为WGS-84坐标系,高程系统为WGS-84椭球的大地高。GE...
注册完成后,你会收到包含API密钥的HTML页面,其中包含展示Google地图所需的JavaScript代码。核心的JavaScript函数`load()`会在页面加载时被调用,初始化地图并设置中心位置。 在第一部分中,你将构建应用程序的...
这个过程可以借助Google Maps API、高德地图API或者百度地图API等服务,将地址转换为坐标。Python的geopy库是一个常用的选择,它可以调用各种地理编码服务。 有了坐标信息后,我们可以利用Python的地理信息系统...
1. **目标识别**:首先,用户需要确定要抓取的地图源,这可能是各种在线地图服务,如谷歌地图、百度地图、高德地图等,或者是含有嵌入地图的网页。 2. **数据定位**:工具通过解析网页HTML代码,找到地图图片的URL...
1. 地图制作:可以使用GIS软件(如QGIS、ArcGIS)进行地图设计,导入地图数据,编辑样式,创建图层。 2. 数据准备:地图数据通常包括矢量数据(如边界、道路、建筑物)和栅格数据(如卫星影像)。这些数据需要清洗...
4. **配置API密钥**:为了使用谷歌地图API,你需要在Google Cloud Console中创建一个项目并获取API密钥。然后在你的项目中配置这个密钥,通常是在你的Vue实例的初始化阶段或者组件的生命周期钩子中。 5. **处理地图...
此外,由于与Cesium的关联,此插件可能对GIS专业人员、地图开发者或者数据分析师有额外的帮助,他们可以快速下载并存储地图渲染所需的大量资源,以便离线查看或进一步分析。 总结,"Save All Resources"是一款方便...
可下载边界数据 下载后可转换为KMl格式 导入谷歌地球
7. **数据存储与分享**:为了保存或分享路书,可以将行驶轨迹、途经点等信息存储在服务器上,或者以JSON格式导出,供其他用户导入使用。 通过以上步骤,我们便能在谷歌浏览器上利用百度地图的路书功能实现实时汽车...
在这个ASP系统中,地图API可能是通过JavaScript库在客户端渲染地图,而服务器端的ASP则处理与地图相关的逻辑,如获取坐标、存储标注数据等。 接下来,我们关注"DX_Map"这个文件夹。DX通常代表DirectX,但在这里可能...
1. **API 导入与初始化** 在 `test1.jsp` 文件中,首先需要引入 Google Maps JavaScript API。这通常通过在 HTML 文件的 `<head>` 标签内添加一个 `<script>` 标签来完成。API 的 URL 包含了一个密钥,这个密钥是 ...
创建一个简单的 Android 谷歌地图应用涉及到几个关键步骤: 1. **添加权限**:确保在 AndroidManifest.xml 文件中添加了访问网络和显示地图所需的权限。 2. **配置地图视图**:在布局文件中添加 `<com.google....
5. 数据交互:可能涉及与后端服务器进行数据交换,比如获取地理位置信息、保存用户偏好等,这可能需要用到Axios等HTTP库。 6. 自定义组件:可能创建了自定义的Vue组件,比如用于显示地图标记、信息窗口等,以增强...
在本文中,我们将深入探讨如何使用Adobe Flex与Google Maps API相结合来创建互动式的地图应用程序。Flex是一种基于ActionScript 3的开源框架,用于构建富互联网应用程序(RIA)。而Google Maps API则提供了强大的...
【描述】:项目的核心是将在线地图服务的数据,如百度、谷歌、高德和腾讯地图,通过某种方式(可能是抓取或导入)存储到本地的MySQL数据库中。在用户端,使用Node.js处理请求并从数据库中检索地图信息。Leaflet则...
本文将深入探讨如何使用ArcGIS API加载高德地图作为底图,以实现一个功能丰富的地理信息系统(GIS)演示。 首先,我们需要了解ArcGIS API的核心概念。ArcGIS API for JavaScript提供了一整套工具,包括地图对象、...