房��地图google map的初步应用点�?3)

Wed, 30 Mar 2011 08:58:00 GMT

摘要: 房��地图google map的初步应用点�?1) 房��地图google map的初步应用点�?2) 房��地图google map的初步应用点�?3)房��地图google map的初步应用点�?4) google Map的交互基本都是事仉��动的�Q�这表示js是通过生成旉��来响应交互的�Q��ƈ且处于监听我们设定的事�g�Q�每�?Google Maps API 对象都可导出大量已命名的事�g。如果程序想�?.. 阅读全文

陈于�?/a> 2011-03-30 16:58 发表评论

房��地图google map的初步应用点�?2)

Sat, 05 Mar 2011 08:02:00 GMT

摘要: 房��地图google map的初步应用点�?1) 房��地图google map的初步应用点�?2) 房��地图google map的初步应用点�?3)房��地图google map的初步应用点�?4) 本来是想��房产地图google map的应用记录一个系列，但��1)记录完之后��L��不到旉��l�箋记录下去�Q?)中主要解决了Google Maps JavaScript API V3 �?Googl... 阅读全文

陈于�?/a> 2011-03-05 16:02 发表评论

房��地图google map的初步应用点�?1)

Sat, 12 Feb 2011 07:57:00 GMT

房��地图google map的初步应用点�?1)
房��地图google map的初步应用点�?2)
房��地图google map的初步应用点�?3)

房��地图google map的初步应用点�?4)

以前的房产地图一直都是��用有道地图，虽然有道地图是很好，但是��Z��更好�Q�还是决定��用google地图来重新开发^_^�Q�下面是一个开发完毕的��单应用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 文档读�v来真的是很清晎ͼ�各种demo也很齐全�Q��ƈ且论坛的拥有巨大的论坛支持，�Ҏ��了一下Google Maps JavaScript API V3 �?V2 的版本，虽然�W?版的 Google Maps API 看上去跟�W?版挺相识�Q�但在内在机制上有了较大的变化，��其在对�U�d��览器的支持上，专门针对iphone和android讑֤�的开发。V2版本google已经宣布不再予以�l�箋支持�Q�所以还是选择了V3版本�?br />
Google Local Search API
地址 http://code.google.com/intl/zh-CN/apis/maps/documentation/localsearch/index.html

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

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

爉��?: 使用的是Google Maps JavaScript API V3�Q�http://maps.google.com/maps/api/js �|�址指向 Javascript 文�g所在的位置�Q�该文�g会蝲入��用第 3 �?Google Maps API 所需的全部符号和定义�?br />

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 Sampletitle>
<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
        });
      }

      //删除叠加�?/span>
      function deleteOverlays() {
          if (markersArray) {
            for (i in markersArray) {
              markersArray[i].setMap(null);
            }
            markersArray.length = 0;
          }
      }

      //关闭信息提示�H�口
      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�q�行甌��与域名绑�?br />

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) : 它接受单一变量�Q�该变量可以是字�W�串、google.maps.Map2 或google.maps.LatLng。如果是字符�Ԍ��会尝试将字符串解析�ؓ google.maps.LatLng

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

searcher.setRestriction() : 讄��搜烦�l�构�c�d��

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

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

�W�一步解决了map和local search的版本冲�H�后�Q�下面可以进行全部的开发，Google Maps JavaScript API提供的UI�Q�EVENT相关接口非常之多�Q�但不一定就能直接适用我们的需求，�q�需要��用��承基�c�MVCObject�Q�OverlayView�{��l�封装�?br />
如果你也在进行google map的开发，�Ƣ迎赐教和讨论，��Z��个qq��：11029590

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

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

陈于�?/a> 2011-02-12 15:57 发表评论

亚洲风情亚Aⅴ在线发布,久久精品国产亚洲AV蜜臀色欲,亚洲国产综合第一精品小说

房��地图google map的初步应用点�?3)

房��地图google map的初步应用点�?2)

房��地图google map的初步应用点�?1)