房产地图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的初步应用点滴.1)(转)的更多相关文章

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

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

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

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

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

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

  4. 谷歌地图实现车辆轨迹移动播放(google map api)

    开发技术:jquery,js baidu map api,json,ajax QQ1310651206 谷歌地图(google map api)实现车辆轨迹移动播放(google map api)

  5. Android Google Map API使用的八个步骤

    本系列教程将分为两部分,第一部分是指导用户使用Mapview控件进行编程,其中包括了如何获得Google Map API,如何使用该API进行简单的开发,如何获得用户当前所在的位置.第二部分则包括如何 ...

  6. Android中Google地图路径导航,使用mapfragment地图上画出线路(google map api v2)详解

    在这篇里我们只聊怎么在android中google map api v2地图上画出路径导航,用mapfragment而不是mapview,至于怎么去申请key,manifest.xml中加入的权限,系 ...

  7. Google Map API v2 (三)----- 地图上添加标记(Marker),标记info窗口,即指定经纬度获取地址字符串

    接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...

  8. Google Map API v2 步步为营(一) ----- 初见地图

    官方文档:https://developers.google.com/maps/documentation/android/start?hl=zh-CN 先谷歌后百度.使用google的api基本上按 ...

  9. arcgis api for silverlight使用google map等多个在线地图

    原文 http://blog.csdn.net/leesmn/article/details/6820245 无可否认,google map实在是很漂亮.可惜对于使用arcgis api for si ...

随机推荐

  1. 数据库实例: STOREBOOK > 用户 > 编辑 用户: DBSNMP

    ylbtech-Oracle:数据库实例: STOREBOOK  >  用户  >  编辑 用户: DBSNMP 编辑 用户: DBSNMP 1. 一般信息返回顶部 1.1, 1.2, 2 ...

  2. Visual Studio 2013键盘码农常用快捷键

    声明及广告 所有功能针对C#开发配置而写,面向人群是喜欢键盘操作而非鼠标操作的开发者.部分功能可能由插件提供,我会尽可能标注出相应的插件名称.为行文方便,所有快捷键以大写形式表示.太常用的快捷键,如C ...

  3. Python在Windows下操作CH341DLL

    #! /usr/bin/env python #coding=utf-8 import os import time from ctypes import * class USBI2C(): ch34 ...

  4. OTL翻译(7) -- otl_exception类

    otl_exception 这个类是OTL用来抛出异常的类.如果数据库API返回一个非0的错误值,则OTL会将会抛出一个otl_exception的异常.一个otl_exception异常有可能是一个 ...

  5. tensorflow 之常见模块conv,bn...实现

    使用tensorflow时,会发现tf.nn,tf.layers, tf.contrib模块有很多功能是重复的,尤其是卷积操作,在使用的时候,我们可以根据需要现在不同的模块.但有些时候可以一起混用. ...

  6. 在CentOS 7上使用Yum源安装和卸载 MongoDB 3.4

    在CentOS 7上使用Yum源安装和卸载 MongoDB 3.4 1.配置Yum源 vim /etc/yum.repos.d/mongodb-org-3.4.repo [mongodb-org-3. ...

  7. 无法执行 varchar 值到 varchar 的隐式转换,原因是,由于排序规则冲突,该值的排序规则未经解析。

    SELECT CONVERT(VARCHAR(100), 列名) FROM Table 提示错误: 无法执行 varchar 值到 varchar 的隐式转换,原因是,由于排序规则冲突,该值的排序规则 ...

  8. Android -- ImageLoader本地缓存

    传送门 <Android -- ImageLoader简析>  http://www.cnblogs.com/yydcdut/p/4008097.html 本地缓存 在缓存文件时对文件名称 ...

  9. Android 如何去掉手机中横竖屏切换时的转屏动画?

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  10. tcp协议的端口状态

    Listening Syn_sent syn_rcvd established close_wait time_wait --------- 对方主动关闭(对方调用close()), 我方的状态变为 ...