`

导入Google地图与获取Google查询HTML信息

阅读更多
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&amp;v=2&amp;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>
分享到:
评论

相关推荐

    vue2googlemap基于Vue2x和google地图组件

    这个插件将Google Maps的强大功能与Vue的声明式渲染相结合,为开发者提供了更方便的方式来创建交互式的地图应用。下面将详细介绍Vue2googlemap的关键特性和使用方法。 1. **安装与配置** 安装Vue2googlemap通常...

    完整的谷歌地图工程,新手适用

    在IT行业中,谷歌地图(Google Maps)是一款广泛应用于各种web和移动应用的地理信息系统,它提供了丰富的地图数据、导航功能以及API,使得开发者能够轻松地集成地图服务到自己的项目中。这个“完整的谷歌地图工程,...

    google电子地图(JSP)

    获取API密钥,这是连接你的应用与Google Maps服务的关键。将密钥添加到你的JSP页面中,以便API能够正确加载和运行。 在`GoogleMapsExample`这个压缩包文件中,可能包含了以下内容: 1. JSP文件:这是主页面,包含...

    firemonkey打开Google地图

    "firemonkey打开Google地图"这个话题涉及到如何在FireMonkey应用中集成并使用Google Maps服务。下面我们将深入探讨这个主题。 首先,FireMonkey(FMX)是Delphi和C++Builder中的一个UI框架,它允许开发者用相同的...

    基于Google Earth的地图要素矢量化及数据处理.pdf

    Google Earth(简称GE)是Google公司于2005年推出的卫星影像软件,用户可以通过网络访问包含航空与卫星图片的海量数据库,获取实时地理信息。GE采用的平面坐标系统为WGS-84坐标系,高程系统为WGS-84椭球的大地高。GE...

    使用 XSLT、KML 和 Google Maps API 在地图上覆盖数据

    注册完成后,你会收到包含API密钥的HTML页面,其中包含展示Google地图所需的JavaScript代码。核心的JavaScript函数`load()`会在页面加载时被调用,初始化地图并设置中心位置。 在第一部分中,你将构建应用程序的...

    python制作北京市900个交通电子眼分布地图

    这个过程可以借助Google Maps API、高德地图API或者百度地图API等服务,将地址转换为坐标。Python的geopy库是一个常用的选择,它可以调用各种地理编码服务。 有了坐标信息后,我们可以利用Python的地理信息系统...

    电子地图一把抓

    1. **目标识别**:首先,用户需要确定要抓取的地图源,这可能是各种在线地图服务,如谷歌地图、百度地图、高德地图等,或者是含有嵌入地图的网页。 2. **数据定位**:工具通过解析网页HTML代码,找到地图图片的URL...

    动态地图调用方法和算出坐标方法.关于地图调用的一整套方法.

    1. 地图制作:可以使用GIS软件(如QGIS、ArcGIS)进行地图设计,导入地图数据,编辑样式,创建图层。 2. 数据准备:地图数据通常包括矢量数据(如边界、道路、建筑物)和栅格数据(如卫星影像)。这些数据需要清洗...

    前端项目-vue-google-maps.zip

    4. **配置API密钥**:为了使用谷歌地图API,你需要在Google Cloud Console中创建一个项目并获取API密钥。然后在你的项目中配置这个密钥,通常是在你的Vue实例的初始化阶段或者组件的生命周期钩子中。 5. **处理地图...

    Save All Resources谷歌插件

    此外,由于与Cesium的关联,此插件可能对GIS专业人员、地图开发者或者数据分析师有额外的帮助,他们可以快速下载并存储地图渲染所需的大量资源,以便离线查看或进一步分析。 总结,"Save All Resources"是一款方便...

    获取行政边界.HTML

    可下载边界数据 下载后可转换为KMl格式 导入谷歌地球

    利用百度地图的路书功能实现汽车实时定位

    7. **数据存储与分享**:为了保存或分享路书,可以将行驶轨迹、途经点等信息存储在服务器上,或者以JSON格式导出,供其他用户导入使用。 通过以上步骤,我们便能在谷歌浏览器上利用百度地图的路书功能实现实时汽车...

    asp电子地图标注

    在这个ASP系统中,地图API可能是通过JavaScript库在客户端渲染地图,而服务器端的ASP则处理与地图相关的逻辑,如获取坐标、存储标注数据等。 接下来,我们关注"DX_Map"这个文件夹。DX通常代表DirectX,但在这里可能...

    googlemap实例工程

    1. **API 导入与初始化** 在 `test1.jsp` 文件中,首先需要引入 Google Maps JavaScript API。这通常通过在 HTML 文件的 `&lt;head&gt;` 标签内添加一个 `&lt;script&gt;` 标签来完成。API 的 URL 包含了一个密钥,这个密钥是 ...

    Android google Map入门

    创建一个简单的 Android 谷歌地图应用涉及到几个关键步骤: 1. **添加权限**:确保在 AndroidManifest.xml 文件中添加了访问网络和显示地图所需的权限。 2. **配置地图视图**:在布局文件中添加 `&lt;com.google....

    一个基于Vuejs的地图

    5. 数据交互:可能涉及与后端服务器进行数据交换,比如获取地理位置信息、保存用户偏好等,这可能需要用到Axios等HTTP库。 6. 自定义组件:可能创建了自定义的Vue组件,比如用于显示地图标记、信息窗口等,以增强...

    flex结合Google Map

    在本文中,我们将深入探讨如何使用Adobe Flex与Google Maps API相结合来创建互动式的地图应用程序。Flex是一种基于ActionScript 3的开源框架,用于构建富互联网应用程序(RIA)。而Google Maps API则提供了强大的...

    Node.js-基于MySQLNode.jsLeaflet的离线地图展示

    【描述】:项目的核心是将在线地图服务的数据,如百度、谷歌、高德和腾讯地图,通过某种方式(可能是抓取或导入)存储到本地的MySQL数据库中。在用户端,使用Node.js处理请求并从数据库中检索地图信息。Leaflet则...

    arcgis api 加载高德底图

    本文将深入探讨如何使用ArcGIS API加载高德地图作为底图,以实现一个功能丰富的地理信息系统(GIS)演示。 首先,我们需要了解ArcGIS API的核心概念。ArcGIS API for JavaScript提供了一整套工具,包括地图对象、...

Global site tag (gtag.js) - Google Analytics