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

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

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

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

以前的房产地图一直都是使用有道地图，虽然有道地图是很好，但是为了更好，还是决定使用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的开发，欢迎赐教和讨论，建了个qq群：11029590

----------------------------------------

by 陈于喆
QQ:34174409
Mail: dongbule@163.com