房產(chǎn)地圖google map的初步應(yīng)用點(diǎn)滴.1)
房產(chǎn)地圖google map的初步應(yīng)用點(diǎn)滴.2)
房產(chǎn)地圖google map的初步應(yīng)用點(diǎn)滴.3)
以前的房產(chǎn)地圖一直都是使用有道地圖，雖然有道地圖是很好，但是為了更好，還是決定使用google地圖來重新開發(fā)^_^，下面是一個(gè)開發(fā)完畢的簡(jiǎn)單應(yīng)用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也很齊全，并且論壇的擁有巨大的論壇支持，對(duì)比了一下Google Maps JavaScript API V3 和 V2 的版本，雖然第3版的 Google Maps API 看上去跟第2版挺相識(shí)，但在內(nèi)在機(jī)制上有了較大的變化，尤其在對(duì)移動(dòng)瀏覽器的支持上，專門針對(duì)iphone和android設(shè)備的開發(fā)。V2版本google已經(jīng)宣布不再予以繼續(xù)支持，所以還是選擇了V3版本。
Google Local Search API
地址 http://code.google.com/intl/zh-CN/apis/maps/documentation/localsearch/index.html
上面的地址是目前Local Search的最新地址，但郁悶的是居然掛上了 Deprecated ，一樣的文檔也相當(dāng)齊全，在應(yīng)用之前需要先為你的域名申請(qǐng)一個(gè)API key，這個(gè)是注冊(cè)地址http://code.google.com/intl/zh-CN/apis/maps/signup.html，很簡(jiǎn)單，按照提示很快就搞定了。
在整合Google Maps JavaScript API V3和Google Local Search API發(fā)現(xiàn)這兩個(gè)版本是不兼容的，Local Search API實(shí)際上還是沿用了Maps V2的接口，為了解決這個(gè)問題，需要中間一個(gè)跳板使得兩者兼容，所以選擇了iframe，父頁(yè)面使用Google Maps V3，子頁(yè)面使用Local Search API，當(dāng)需要應(yīng)用到本地搜索時(shí)，父頁(yè)面向子頁(yè)面?zhèn)鬟f查詢條件，子窗口應(yīng)用Local Search API獲得查詢的result后返回給父頁(yè)面，這樣就形成一個(gè)跳板，避免了兩者因?yàn)榘姹締栴}而產(chǎn)生的沖突，當(dāng)然還有其他的辦法，不過iframe應(yīng)該是比較簡(jiǎn)單處理，下面是一個(gè)demo
父頁(yè)面 : 使用的是Google Maps JavaScript API V3，http://maps.google.com/maps/api/js 網(wǎng)址指向 Javascript 文件所在的位置，該文件會(huì)載入使用第 3 版 Google Maps API 所需的全部符號(hào)和定義。
<!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;
}
}
//關(guān)閉信息提示窗口
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>
子頁(yè)面：http://www.google.com/jsapi?key 需要在google進(jìn)行申請(qǐng)與域名綁定
<!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>
摘錄幾個(gè)常用的Local Search API Reference
new google.search.LocalSearch() : 創(chuàng)建了一個(gè)LocalSearch的Service
searcher.setCenterPoint(point) : 它接受單一變量，該變量可以是字符串、google.maps.Map2 或google.maps.LatLng。如果是字符串，會(huì)嘗試將字符串解析為 google.maps.LatLng
searcher.setResultSetSize(8) : 調(diào)用此方法以選擇由每個(gè)搜索器返回的結(jié)果數(shù)
searcher.setRestriction() : 設(shè)置搜索結(jié)構(gòu)類型
searcher.setSearchCompleteCallback() : 此方法用于注冊(cè)對(duì)象和方法以通知搜索完成。應(yīng)用程序可以通過使用 opt_arguments之后隨意傳入環(huán)境參數(shù)
searcher.execute(keyWord) : 調(diào)用此方法以開始新的搜索
第一步解決了map和local search的版本沖突后，下面可以進(jìn)行全部的開發(fā)，Google Maps JavaScript API提供的UI，EVENT相關(guān)接口非常之多，但不一定就能直接適用我們的需求，還需要使用繼承基類MVCObject，OverlayView等繼續(xù)封裝。
如果你也在進(jìn)行g(shù)oogle map的開發(fā)，歡迎賜教和討論，建了個(gè)qq群：11029590
----------------------------------------
by 陳于喆
QQ:34174409
Mail: dongbule@163.com