房产地图google map的初步应用点滴.1)
房产地图google map的初步应用点滴.2)
房产地图google map的初步应用点滴.3)

以前的房产地图一直都是使用有道地图,虽然有道地图是很好,但是为了更好,还是决定使用google地图来重新开发^_^,下面是一个开发完毕的简单应用http://xf.house.163.com/gz/map/000B.html

1)整合Google Maps JavaScript API V3 与 Google Local Search API

Google Maps JavaScript API V3 
地址 http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/

Google Maps JavaScript API V3 文档读起来真的是很清晰,各种demo也很齐全,并且论坛的拥有巨大的论坛支持,对比了一下Google Maps JavaScript API V3 和 V2 的版本,虽然第3版的 Google Maps API 看上去跟第2版挺相识,但在内在机制上有了较大的变化,尤其在对移动浏览器的支持上,专门针对iphone和android设备的开发。V2版本google已经宣布不再予以继续支持,所以还是选择了V3版本。

Google Local Search API
地址 http://code.google.com/intl/zh-CN/apis/maps/documentation/localsearch/index.html

上面的地址是目前Local Search的最新地址,但郁闷的是居然挂上了 Deprecated ,一样的文档也相当齐全,在应用之前需要先为你的域名申请一个API key,这个是注册地址http://code.google.com/intl/zh-CN/apis/maps/signup.html,很简单,按照提示很快就搞定了。

在整合Google Maps JavaScript API V3和Google Local Search API发现这两个版本是不兼容的,Local Search API实际上还是沿用了Maps V2的接口,为了解决这个问题,需要中间一个跳板使得两者兼容,所以选择了iframe,父页面使用Google Maps V3,子页面使用Local Search API,当需要应用到本地搜索时,父页面向子页面传递查询条件,子窗口应用Local Search API获得查询的result后返回给父页面,这样就形成一个跳板,避免了两者因为版本问题而产生的冲突,当然还有其他的办法,不过iframe应该是比较简单处理,下面是一个demo

父页面 : 使用的是Google Maps JavaScript API V3,http://maps.google.com/maps/api/js 网址指向 Javascript 文件所在的位置,该文件会载入使用第 3 版 Google Maps API 所需的全部符号和定义。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title>Google AJAX Search API Sample</title>
<style type="text/css"> 
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");

</style>
<script type="text/javascript" src="http://xf.house.163.com/product/js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
      var map;
      var lat = 23.116193;
      var lng = 113.374525;
      var markersArray = [];
      var windowArray = [];
      function initialize() {
        var mapDiv = document.getElementById('map-canvas');
          map = new google.maps.Map(mapDiv, {
          center: new google.maps.LatLng(lat,lng),
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      }
 
      //删除叠加层
      function deleteOverlays() {
          if (markersArray) {
            for (i in markersArray) {
              markersArray[i].setMap(null);
            }
            markersArray.length = 0;
          }
      }
 
      //关闭信息提示窗口
      function closeWindows() {
          if (windowArray) {
            for (i in windowArray) {
                windowArray[i].close();
            }
          }
         }
      
      function show(results){
          parent.deleteOverlays();
          windowArray.length = 0;
          for (var i = 0; results && i < results.length; i++) {
              showOne(results[i]);
          }
      }
      function showOne(result){
          //console.debug(result.title+","+result.lat+":" + result.lng +","+result.streetAddress+","+result.city+","+result.url);
          var infowindow = new google.maps.InfoWindow({
              content: result.html
            });
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(result.lat,result.lng),
              map: map
            });
            markersArray.push(marker);
            windowArray.push(infowindow);
            google.maps.event.addListener(marker, 'click', function() {
              closeWindows();
                infowindow.open(map,marker);
            });
      }

function searchMap(){
          var keyWord = document.getElementById("keyWord").value;
          mapIframe.window.loadMap(23.116193,113.374525,keyWord);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body style="">
<div id="map-canvas" style="width: 600px; height: 500px"></div>
<input type="text" name="keyWord" id="keyWord"/>
<input type="button" onclick="searchMap();" value="查询" id="btn"/>
<iframe name="mapIframe" id="mapIframe" style="display:none" src="local.html"></iframe>
</body>
</html>

子页面:http://www.google.com/jsapi?key 需要在google进行申请与域名绑定

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<script src="http://www.google.com/jsapi?key=ABQIAAAAtV_DTJOYJT-9cvTO-5KJ2BSnjw5qeDlzCnItJoREFggHbBwu_RQBEyFqvq_vMlzqsS4afIB8ZIvMkw" type="text/javascript"></script>
<script type="text/javascript"> 
    google.load('search', '1');
    google.load('maps', '2');
 
    function loadMap(lat,lng,keyWord) {
        var point = new GLatLng(lat,lng);
        console.debug(keyWord+"-"+lat+","+lng);
        searchMap(point,keyWord);
    }
        
    function searchMap(point,keyWord){
        var searcher = new google.search.LocalSearch();
        searcher.setCenterPoint(point);
        searcher.setResultSetSize(GSearch.LARGE_RESULTSET);
        searcher.setSearchCompleteCallback(this, function() {
          parent.show(searcher.results); 
        });
        searcher.execute(keyWord);
    }
</script>
</head>
<body></body>
</html>

摘录几个常用的Local Search API Reference

new google.search.LocalSearch() : 创建了一个LocalSearch的Service

searcher.setCenterPoint(point) : 它接受单一变量,该变量可以是字符串、google.maps.Map2 或google.maps.LatLng。如果是字符串,会尝试将字符串解析为 google.maps.LatLng

searcher.setResultSetSize(8) : 调用此方法以选择由每个搜索器返回的结果数

searcher.setRestriction() : 设置搜索结构类型

searcher.setSearchCompleteCallback() : 此方法用于注册对象和方法以通知搜索完成。应用程序可以通过使用 opt_arguments之后随意传入环境参数

searcher.execute(keyWord) :  调用此方法以开始新的搜索 

第一步解决了map和local search的版本冲突后,下面可以进行全部的开发,Google Maps JavaScript API提供的UI,EVENT相关接口非常之多,但不一定就能直接适用我们的需求,还需要使用继承基类MVCObject,OverlayView等继续封装。

房产地图google map的初步应用点滴.1)(转)的更多相关文章

  1. 房产地图google map的初步应用点滴.4)(转)

    房产地图google map的初步应用点滴.1) 房产地图google map的初步应用点滴.2) 房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) ...

  2. 房产地图google map的初步应用点滴.3)(转)

    房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) go ...

  3. 房产地图google map的初步应用点滴.2)(转)

    房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 本来 ...

  4. 谷歌地图实现车辆轨迹移动播放(google map api)

    开发技术:jquery,js baidu map api,json,ajax QQ1310651206 谷歌地图(google map api)实现车辆轨迹移动播放(google map api)

  5. Android Google Map API使用的八个步骤

    本系列教程将分为两部分,第一部分是指导用户使用Mapview控件进行编程,其中包括了如何获得Google Map API,如何使用该API进行简单的开发,如何获得用户当前所在的位置.第二部分则包括如何 ...

  6. Android中Google地图路径导航,使用mapfragment地图上画出线路(google map api v2)详解

    在这篇里我们只聊怎么在android中google map api v2地图上画出路径导航,用mapfragment而不是mapview,至于怎么去申请key,manifest.xml中加入的权限,系 ...

  7. Google Map API v2 (三)----- 地图上添加标记(Marker),标记info窗口,即指定经纬度获取地址字符串

    接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...

  8. Google Map API v2 步步为营(一) ----- 初见地图

    官方文档:https://developers.google.com/maps/documentation/android/start?hl=zh-CN 先谷歌后百度.使用google的api基本上按 ...

  9. arcgis api for silverlight使用google map等多个在线地图

    原文 http://blog.csdn.net/leesmn/article/details/6820245 无可否认,google map实在是很漂亮.可惜对于使用arcgis api for si ...

随机推荐

  1. CentOS 加载/挂载 U盘 (转)

    原文链接:CentOS 加载/挂载 U盘 Linux如何加载(优)U盘 1,以root用户登陆    先加载USB模块 modprobe usb-storage    用fdisk -l 看看U盘的设 ...

  2. OpenCV教程(41) 人脸特征检测

          在OpenCV中,自带着Harr分类器人脸特征训练的文件,利用这些文件,我们可以很方面的进行人脸,眼睛,鼻子,表情等的检测.      人脸特征文件目录: ../opencv2.46/op ...

  3. 数学图形之罗马曲面(RomanSurface)

    罗马曲面,像是一个被捏扁的正四面体. 本文将展示罗马曲面的生成算法和切图,使用自己定义语法的脚本代码生成数学图形.相关软件参见:数学图形可视化工具,该软件免费开源.QQ交流群: 367752815 维 ...

  4. 第六章 JVM垃圾收集器(2)

    上一章记录了几种常见的垃圾收集器,见<第五章 JVM垃圾收集器(1)> 1.G1 说明: 从上图来看,G1与CMS相比,仅在最后的"筛选回收"部分不同(CMS是并发清除 ...

  5. window安装Scrapy———解决报错问题

    系统是WIN10 64位Python是3.5.2今天安装pip install Scrapy  来安装发现报错Microsoft Visual C++ 14.0 is required 检查发现电脑中 ...

  6. Git 忽略规则 .gitignore文件 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  7. 分布式唯一ID极简教程

    原创 2017-11-21 帝都羊 架构师小秘圈 一,题记 所有的业务系统,都有生成ID的需求,如订单id,商品id,文章ID等.这个ID会是数据库中的唯一主键,在它上面会建立聚集索引! ID生成的核 ...

  8. 值得收藏的十二条Jquery随身笔记

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...

  9. 编写和执行C#代码的插件:CS-Script for Notepad++

    这个插件可以方便得让您在Notepad++编辑器中编辑和执行C#代码(脚本).它具备通用的C#智能感知和项目任务管理功能,方式非常类似于MS Visual Studio.除了这一点,它提供了通用的调试 ...

  10. CentOS7.0 x86_64系统上构建php开发环境--Lamp(包含设置虚拟文件夹,加入SELinux对httpd的支持等知识)

    一.安装mysql,直接用yum安装就可以,mysql在centos7.0版本号中被mariadb替代了. 命令: yum install mysql-server mysql 安装好了,选择改动my ...