Google Map开发房产地图实例.doc

Google Map开发房产地图实例chenyz / qq群: 11029590房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3)房产地图google map的初步应用点滴.4)房产地图google map的初步应用点滴.1)以前的房产地图一直都是使用有道地图，虽然有道地图是很好，但是为了更好，还是决定使用google地图来重新开发_，下面是一个开发完毕的简单应用/gz/map/000B.html1)整合Google Maps JavaScript API V3 与 Google Local Search APIGoogle Maps JavaScript API V3地址 /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地址 /intl/zh-CN/apis/maps/documentation/localsearch/index.html上面的地址是目前Local Search的最新地址，但郁闷的是居然挂上了 Deprecated ，一样的文档也相当齐全，在应用之前需要先为你的域名申请一个API key，这个是注册地址/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，/maps/api/js 网址指向 Javascript 文件所在的位置，该文件会载入使用第 3 版 Google Maps API 所需的全部符号和定义。GoogleAJAXSearchAPISampleimporturl(/uds/css/gsearch.css);importurl(/uds/solutions/localsearch/gmlocalsearch.css);importurl(/uds/css/gsearch.css);importurl(/uds/solutions/localsearch/gmlocalsearch.css);varmap;varlat=23.116193;varlng=113.374525;varmarkersArray=;varwindowArray=;functioninitialize()varmapDiv=document.getElementById(map-canvas);map=newgoogle.maps.Map(mapDiv,center:newgoogle.maps.LatLng(lat,lng),zoom:15,mapTypeId:google.maps.MapTypeId.ROADMAP);/删除叠加层functiondeleteOverlays()if(markersArray)for(iinmarkersArray)markersArrayi.setMap(null);markersArray.length=0;/关闭信息提示窗口functioncloseWindows()if(windowArray)for(iinwindowArray)windowArrayi.close();functionshow(results)parent.deleteOverlays();windowArray.length=0;for(vari=0;results&iresults.length;i+)showOne(resultsi);functionshowOne(result)/console.debug(result.title+,+result.lat+:+result.lng+,+result.streetAddress+,+result.city+,+result.url);varinfowindow=newgoogle.maps.InfoWindow(content:result.html);varmarker=newgoogle.maps.Marker(position:newgoogle.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););functionsearchMap()varkeyWord=document.getElementById(keyWord).value;mapIframe.window.loadMap(23.116193,113.374525,keyWord);google.maps.event.addDomListener(window,load,initialize);子页面：/jsapi?key 需要在google进行申请与域名绑定google.load(search,1);google.load(maps,2);functionloadMap(lat,lng,keyWord)varpoint=newGLatLng(lat,lng);console.debug(keyWord+-+lat+,+lng);searchMap(point,keyWord);functionsearchMap(point,keyWord)varsearcher=newgoogle.search.LocalSearch();searcher.setCenterPoint(point);searcher.setResultSetSize(GSearch.LARGE_RESULTSET);searcher.setSearchCompleteCallback(this,function()parent.show(searcher.results););searcher.execute(keyWord);摘录几个常用的Local Search API Referencenew google.search.LocalSearch() : 创建了一个LocalSearch的Servicesearcher.setCenterPoint(point) : 它接受单一变量，该变量可以是字符串、google.maps.Map2或google.maps.LatLng。如果是字符串，会尝试将字符串解析为google.maps.LatLngsearcher.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房产地图google map的初步应用点滴.2)本来是想将房产地图google map的应用记录一个系列，但继1)记录完之后总找不到时间继续记录下去，1)中主要解决了Google Maps JavaScript API V3 与 Google Local Search API两者由于版本问题带来的一系列麻烦，思路是使用一个iframe作为兼容的跳板，子页面应用Local Search API获得查询的result后返回给父页面，下面再记录一些地图坐标的定位和一些UI的组成。效果可参考 /gz/map/00Xa.html1.坐标定位打开一个楼盘的地图，首先需要将此楼盘定位为此地图的中心点varmap;varlat=23.1257424;varlng=113.37404225;functioninit()varmapDiv=document.getElementById(map-canvas);map=newgoogle.maps.Map(mapDiv,center:newgoogle.maps.LatLng(lat,lng),zoom:15,mapTypeId:google.maps.MapTypeId.ROADMAP);google.maps.event.addDomListener(window,load,init);这里要注意的是我们引进了/maps/api/js?sensor=false，这是google MAP API V3版本的连接点创建了一个div 作为地图的容器，然后对地图基本类Map进行创建google.maps.Map 是google map的容器实现，在指定的 HTML 容器中创建新的地图，该容器通常是一个DIV元素在初始化地图，还要创建一个地图的初始化变量，这些变量包括了上面的center，zoom，mapTypeId等等google.maps.LatLng 是一个以纬度和经度表示的地理坐标点，在上面我们使用一个定义好的LatLng类确定了整个地图的中心点，其中lat 和 lng 分别为我们楼盘的经纬度值zoom 为地图展开的级别google.maps.MapTypeId.ROADMAP 是地图显示的类型，通常有ROADMAP，SATELLITE，TERRAIN等等，这里选择的ROADMAP类型是显示为普通的街道地图2.为定位的楼盘添加图标在上面完成了将楼盘显示到整个地图的中心处，下面为该楼盘添加图标，给楼盘坐标的位置添加图标，实际上也就是在地图上添加一个叠加层，在google MAP API中拥有大量的实现类，如Marker，为我们上面的程序加多个Marker实现，楼盘的图标就可以显示出来varmap;varlat=23.1257424;varlng=113.37404225;functioninitialize()varmapDiv=document.getElementById(map-canvas);map=newgoogle.maps.Map(mapDiv,center:newgoogle.maps.LatLng(lat,lng),zoom:15,mapTypeId:google.maps.MapTypeId.ROADMAP);varmarker=newgoogle.maps.Marker(position:newgoogle.maps.LatLng(lat,lng),map:map);google.maps.event.addDomListener(window,load,initialize);但是呢，这个图标并不是我们想要的，我们想要的是在此楼盘经纬度处放入自己的图片，设置是一段html的显示代码来组成自定义的叠加层，并且这个叠加层可以监听各种事件，可以对拖动地图的DOM元素中指定的地理位置像素坐标进行计算varmap;varlat=23.1257424;varlng=113.37404225;functioninitialize()varmapDiv=document.getElementById(map-canvas);map=newgoogle.maps.Map(mapDiv,center:newgoogle.maps.LatLng(lat,lng),zoom:15,mapTypeId:google.maps.MapTypeId.ROADMAP);newCustomMarker(map.getCenter(),map);functionCustomMarker(latlng,map)this.latlng_=latlng;this.setMap(map);/扩展自OverlayView；OverlayView扩展自MVCObject，实际上也扩展自MVCObjectCustomMtotype=newgoogle.maps.OverlayView();CustomMtotype.draw=function()varme=this;vardiv=this.div_;if(!div)div=this.div_=document.createElement(DIV);div.style.position=absolute;div.innerHTML=;/这个div的对象需要Listener事件，必须先用trigger（me）先进行侦听google.maps.event.addDomListener(div,click,function(event)google.maps.event.trigger(me,click););varpanes=this.getPanes();panes.overlayImage.appendChild(div);CustomMtotype.remove=function()if(this.div_)this.div_.parentNode.removeChild(this.div_);this.div_=null;/获取PositionCustomMtotype.getPosition=function()returnthis.latlng_;google.maps.event.addDomListener(window,load,initialize);实现效果如下我们创建一个CustomMarker类，扩展自OverlayView；OverlayView扩展自MVCObject，实际上也扩展自MVCObject这里需要详细说说OverlayView，我们继承了此类，方法是将叠加层的 prototype 设置为 new OverlayVtotype。必须实现三个方法，即 onAdd()、draw() 和 onRemove()。在 add() 方法中，您应当创建 DOM 对象，并将其作为窗格的子对象附加。在 draw() 方法中，应放置这些元素。在 onRemove() 方法中，应将对象从 DOM 中删除。您必须调用包含有效地图对象的 setMap()，以触发对 onAdd() 方法和 setMap(null) 的调用，这样才能触发 onRemove() 方法。可以在构建叠加层时调用 setMap() 方法，也可以在需要重新显示已删除叠加层的任何时候调用该方法。每当地图属性更改时都会调用 draw() 方法，该方法可以更改元素的位置，如缩放、中心或地图类型。把叠加层的绘图放在draw()方法中，我们再此方法中创建了一个DIV，并且使用innerHTML属性将要显示的html代码写回div中，并且如果需要对此属性加添加Listener事件时，则必须先使用trigger（me）先进行侦听，这样才能对外部的event事件进行反应，在构建完div后还需要获得panes窗口，panes包含渲染叠加层的 DOM 元素，作为显示此 OverlayView 的窗格，记住它是必须在draw 方法调用后才能实用。onRemove() 实现此方法可将您的元素从 DOM 删除。调用 setMap(null) 之后立即调用此方法。getProjection() 返回与相应 OverlayView 相关联的 MapCanvasProjection 对象。仅在调用 draw 函数后才可用3.点击楼盘图标填出楼盘信息盒子下面再需要实现的效果是点击刚才创建的楼盘图标，则弹出一个楼盘信息盒子先上代码，再上效果图importurl(/cnews/css07/style.css);importurl(/cnews/img09/channel_nav.css);importurl(/product/css/ydmap.css);varmap;varlat=23.1257424;varlng=113.37404225;functioninitialize()varmapDiv=document.getElementById(map-canvas);map=newgoogle.maps.Map(mapDiv,center:newgoogle.maps.LatLng(lat,lng),zoom:15,mapTypeId:google.maps.MapTypeId.ROADMAP);varmarker=newCustomMarker(map.getCenter(),map);google.maps.event.addListener(marker,click,function(e)varinfoBox=newInfoBox(latlng:marker.getPosition(),map:map););functionCustomMarker(latlng,map)this.latlng_=latlng;this.setMap(map);/扩展自OverlayView；OverlayView扩展自MVCObject，实际上也扩展自MVCObjectCustomMtotype=newgoogle.maps.OverlayView();CustomMtotype.draw=function()varme=this;vardiv=this.div_;if(!div)div=this.div_=document.createElement(DIV);div.style.position=absolute;div.innerHTML=;/这个div的对象需要Listener事件，必须先用trigger（me）先进行侦听google.maps.event.addDomListener(div,click,function(event)google.maps.event.trigger(me,click););varpanes=this.getPanes();panes.overlayImage.appendChild(div);/计算存放可拖动地图的DOM元素中指定地理位置的像素坐标varpoint=this.getProjection().fromLatLngToDivPixel(this.latlng_);/div的像素坐标if(point)div.style.left=point.x+px;div.style.top=point.y+px;CustomMtotype.remove=function()if(this.div_)this.div_.parentNode.removeChild(this.div_);this.div_=null;/获取PositionCustomMtotype.getPosition=function()returnthis.latlng_;/*InfoBox=楼盘icon点击后弹出的box窗口，继承OverlayView，*/functionInfoBox(opts)google.maps.OverlayView.call(this);this.latlng_=opts.latlng;this.map_=opts.map;this.offsetVertical_=-260;this.offsetHorizontal_=-450;/div偏移的像素this.height_=260;this.width_=460;varme=this;/监听boundsthis.boundsChangedListener_=google.maps.event.addListener(this.map_,bounds_changed,function()returnme.panMap.apply(me););this.setMap(this.map_);InfoBtotype=newgoogle.maps.OverlayView();/移除divInfoBtotype.remove=function()if(this.div_)this.div_.parentNode.removeChild(this.div_);this.div_=null;InfoBtotype.draw=function()/创建elementthis.createElement();if(!this.div_)return;varpixPosition=this.getProjection().fromLatLngToDivPixel(this.latlng_);if(!pixPosition)return;/top,left减去width，height达到右下角对齐的效果this.div_.style.width=this.width_+px;this.div_.style.left=(pixPosition.x+this.offsetHorizontal_)+px;this.div_.style.height=this.height_+px;this.div_.style.top=(pixPosition.y+this.offsetVertical_)+px;this.div_.style.display=block;InfoBtotype.createElement=function()/返回可在其中显示此OverlayView的窗格。仅在调用draw函数后才可用。varpanes=this.getPanes();vardiv=this.div_;if(!div)div=this.div_=document.createElement(div);varcontent=document.getElementById(houseInfoBox_template).value;div.style.border=0pxnone;div.style.position=absolute;div.innerHTML=content;panes.floatPane.appendChild(div);this.panMap();elseif(div.parentNode!=panes.floatPane)/如果panes发生变化，移除此divdiv.parentNode.removeChild(div);panes.floatPane.appendChild(div);else/*对InfoBox的pan进行调整，调整到居中值减去偏移值，控制infobox的位置*/InfoBtotype.panMap=function()varmap=this.map_;/返回当前视口的纬度/经度范围。如果还未启动地图（即mapType仍为Null），或者没有设置中心和缩放，则结果为Null。varbounds=map.getBounds();if(!bounds)return;/InfoBox的位置varposition=this.latlng_;/InfoBox的尺寸variwWidth=this.width_;variwHeight=this.height_;/infobox位置和尺寸的抵消variwOffsetX=this.offsetHorizontal_;variwOffsetY=this.offsetVertica