房产地图google map的初步应用点滴.1)(转)
房产地图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 所需的全部符号和定义。
<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进行申请与域名绑定
<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)(转)的更多相关文章
- 房产地图google map的初步应用点滴.4)(转)
房产地图google map的初步应用点滴.1) 房产地图google map的初步应用点滴.2) 房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) ...
- 房产地图google map的初步应用点滴.3)(转)
房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) go ...
- 房产地图google map的初步应用点滴.2)(转)
房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 本来 ...
- 谷歌地图实现车辆轨迹移动播放(google map api)
开发技术:jquery,js baidu map api,json,ajax QQ1310651206 谷歌地图(google map api)实现车辆轨迹移动播放(google map api)
- Android Google Map API使用的八个步骤
本系列教程将分为两部分,第一部分是指导用户使用Mapview控件进行编程,其中包括了如何获得Google Map API,如何使用该API进行简单的开发,如何获得用户当前所在的位置.第二部分则包括如何 ...
- Android中Google地图路径导航，使用mapfragment地图上画出线路(google map api v2)详解
在这篇里我们只聊怎么在android中google map api v2地图上画出路径导航,用mapfragment而不是mapview,至于怎么去申请key,manifest.xml中加入的权限,系 ...
- Google Map API v2 （三）----- 地图上添加标记（Marker），标记info窗口，即指定经纬度获取地址字符串
接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...
- Google Map API v2 步步为营（一） ----- 初见地图
官方文档:https://developers.google.com/maps/documentation/android/start?hl=zh-CN 先谷歌后百度.使用google的api基本上按 ...
- arcgis api for silverlight使用google map等多个在线地图
原文 http://blog.csdn.net/leesmn/article/details/6820245 无可否认,google map实在是很漂亮.可惜对于使用arcgis api for si ...
随机推荐
- CentOS 加载/挂载 U盘 （转）
原文链接:CentOS 加载/挂载 U盘 Linux如何加载(优)U盘 1,以root用户登陆 先加载USB模块 modprobe usb-storage 用fdisk -l 看看U盘的设 ...
- OpenCV教程(41) 人脸特征检测
在OpenCV中,自带着Harr分类器人脸特征训练的文件,利用这些文件,我们可以很方面的进行人脸,眼睛,鼻子,表情等的检测. 人脸特征文件目录: ../opencv2.46/op ...
- 数学图形之罗马曲面(RomanSurface)
罗马曲面,像是一个被捏扁的正四面体. 本文将展示罗马曲面的生成算法和切图,使用自己定义语法的脚本代码生成数学图形.相关软件参见:数学图形可视化工具,该软件免费开源.QQ交流群: 367752815 维 ...
- 第六章 JVM垃圾收集器（2）
上一章记录了几种常见的垃圾收集器,见<第五章 JVM垃圾收集器(1)> 1.G1 说明: 从上图来看,G1与CMS相比,仅在最后的"筛选回收"部分不同(CMS是并发清除 ...
- window安装Scrapy———解决报错问题
系统是WIN10 64位Python是3.5.2今天安装pip install Scrapy 来安装发现报错Microsoft Visual C++ 14.0 is required 检查发现电脑中 ...
- Git 忽略规则 .gitignore文件 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 分布式唯一ID极简教程
原创 2017-11-21 帝都羊 架构师小秘圈 一,题记 所有的业务系统,都有生成ID的需求,如订单id,商品id,文章ID等.这个ID会是数据库中的唯一主键,在它上面会建立聚集索引! ID生成的核 ...
- 值得收藏的十二条Jquery随身笔记
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...
- 编写和执行C#代码的插件：CS-Script for Notepad++
这个插件可以方便得让您在Notepad++编辑器中编辑和执行C#代码(脚本).它具备通用的C#智能感知和项目任务管理功能,方式非常类似于MS Visual Studio.除了这一点,它提供了通用的调试 ...
- CentOS7.0 x86_64系统上构建php开发环境--Lamp（包含设置虚拟文件夹，加入SELinux对httpd的支持等知识）
一.安装mysql,直接用yum安装就可以,mysql在centos7.0版本号中被mariadb替代了. 命令: yum install mysql-server mysql 安装好了,选择改动my ...