`

导入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>
分享到:
评论

相关推荐

    获取行政边界.HTML

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

    habpanel-widget-googlemaps:具有Google地图和路况图层的HABpanel小部件

    适用于HABpanel(Openhab)的Google Maps小部件 通过捐赠,无论金额多么小,您都在说谢谢并在我脸上露出微笑,因为我知道,有人认为我的项目很有用,值得为此付费 :star-struck: 。 警告 请注意不要过度使用Google ...

    dart-google-maps:使用Dart脚本使用Google Maps JavaScript API v3的库

    Dart Google地图 该项目是一个库,可使用来自dart脚本的 。 用法 要在您的代码中使用此库: 在您的pubspec.yaml添加一个依赖pubspec.yaml : dependencies : google_maps : 在您的dart代码中添加导入: import ...

    web实训——移动端APP

    此系统利用HTML5、CSS、javascript以及jQuery Mobile所写成的移动端手机APP,建议使用Hbuilder软件打开,里面有7个页面,利用谷歌地图API接口进行地图的导入和位置的获取,含有答辩ppt,建议下载

    基于h5 ajax实现手机定位(demo)

    3,目前或取经纬度后,要自行用谷歌地球去分析用户位置(通过卫星地图定位并显示),如何简化这一部分,让被定位者的经纬度自动生成地图图片并一起导入到其他页面(总之不能让被定位者察觉自己被定位的这一事实)。...

    138CMS网站管理系统 v3.0 build20120801.rar

    7.搜索蜘蛛记录、google地图生成、google地图提交 8.网站背景设置、flash幻灯增加参数控制、支持flv文件播放、幻灯可外链图片 9.外部调用JS,后台可自定义生成代码 10.文章列表摘要控制、文章内容自动分页、文章...

    138文章管理系统138cms_v1.0

    搜索蜘蛛记录、google地图生成、google地图提交 7.网站背景设置、flash幻灯增加参数控制、支持flv文件播放、幻灯可外链图片。 8.外部调用JS,后台可自定义生成代码。 9.文章列表摘要控制、文章内容自动分页、文章...

    138CMS网站管理系统V2.0

    搜索蜘蛛记录、google地图生成、google地图提交 7.网站背景设置、flash幻灯增加参数控制、支持flv文件播放、幻灯可外链图片。 8.外部调用JS,后台可自定义生成代码。 9.文章列表摘要控制、文章内容自动分页、文章...

    138CMS网站管理系统 V3.0版发布

    搜索蜘蛛记录、google地图生成、google地图提交 8.网站背景设置、flash幻灯增加参数控制、支持flv文件播放、幻灯可外链图片 9.外部调用JS,后台可自定义生成代码 10.文章列表摘要控制、文章内容自动分页、文章...

    文章管理系统

    2.纠正后台文章编辑,获取编辑器图片无法获取网络图片路径问题 3.后台文章管理,标题后面加入是否含缩略图的图标 4.纠正后台文章编辑,保存远程图片到本地,如果缩略图是网络图片没纠正成本地路径的BUG 5.删除网站...

    博易博客 多用户博客程序

    默认采用基于 XML 的数据存储方式,此种方式提供几乎与静态网页相当的访问效率(避免了数据库并发查询的瓶颈)。同时也可以扩展支持SQL Server、Access等多种数据库存储方式。 独立页面发布功能 除了标准的博客日志...

    MapView的使用

    根据输入城市名动态加载google地图 文章出处:http://www.diybl.com/course/6_system/linux/Linuxjs/2008819/136351.html 1)SendCityName.java: package com.google.android.citygmapview; import android.app....

    灵悦三湘cms文章管理系统(老y加强版)2.1

    6.搜索蜘蛛记录、google地图生成、google地图提交 7.网站背景设置、flash幻灯增加参数控制、支持flv文件播放、幻灯可外链图片 8.外部调用JS,后台可自定义生成代码 9.文章列表摘要控制、文章内容自动分页、文章页...

Global site tag (gtag.js) - Google Analytics