房產地圖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的開發，歡迎賜教和討論，建了個qq群：11029590
----------------------------------------
by 陳于喆
QQ:34174409
Mail: dongbule@163.com