Google Maps 学习笔记(一)2014.06.04
1.<body onload="加载地图的函数" onunload="GUnload()">
2.new GMap2(container,opts) //容器;控制更复杂的地图特性
3.setCenter()和panTo() // GMaps.setCenter(point,zoomlevel,opts) //new GLatLng(纬度,经度);0~17 //GMaps2.panTo(point)
4.GMaps.panBy()//移动相对距离的函数
5.地图类型:普通地图(G_NORMAL_MAP)、卫星地图(G_SATELLITE_MAP)、混合地图(G_HYBRID_MAP) // GMap2.setMapType()
6.控件: GControl()
精简地图控件GSmallMapControl()、完整地图控件GLargeMapControl()、精简缩放控件GsmallZoomControl()、比例尺控件GScaleControl()、地图类型控件GMapTypeControl()
map.addControl(new GSmallMapControl(),position); //参数position用于定义控件在地图上的位置
7.if(GBrowserIsCompatible())
8.定义控件位置 GControlPosition()对象 new GControlPosition(anchor,offset);//anchor:控件位置的参照点,枚举类型 G_ANCHOR_TOP_LEFT、G_ANCHOR_TOP_RIGHT、
G_ANCHOR_ BOTTOM_LEFT、G_ANCHOR_BOTTOM_RIGHT ; offset: new GSize(x,y) ;x:控件相对于参照点的最近水平距离,y:控件相对于参照点的最近垂直距离 单位为像素px
9.new GMarker(point,opts)
10.自定义GMarker()对象
//创建一个无名类
{s
property1:value1;
property2:value2;
...
}
icon属性,GIon()对象;默认G_DEFAULT_ICON;
示例代码:
myICon = new GIon();//创建自定义的GIon
myICon.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";//前景图片
myICon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";//阴影图片
myICon.iconSize = new GSize(12,20);//前景图片大小,长*宽
myICon.shadowSize = new GSize(22,20);//阴影图片大小,长*宽
myICon.iconAnchor = new GPoint(6,20);//myIcon 锚定点相对于myIcon图片左上角的像素距离
myICon.infoWindowAnchor = new GPoint(5,1);//信息窗口相对于myIcon图片左上角的像素距离
var marker1 = new GMarker(geoPoint1,{icon:myIcon,title:"把鼠标移上来,看看有什么"});//自定义GmarkerOptions的icon属性//自定义GMarkerOptions的title属性
11.信息框:
GMarker.openInfoWindowHtml(point,content,opts?)//content:HTML字符串;opts:GInfoWindowOptions对象(无名类),可以省略
GMarker.openInfoWindow(content,opts?)//content:DOM对象
代码示例:
var div = document.createElement("div");
div.style.color = "green";
div.innerHTML = "openInfoWindow创建的GInfoWindow";
marker0.openInfoWindow(div);
12.多标签信息窗口
多标签信息窗口GInfoWindowTabs()对象 new GInfoWindowTab(lable,content)//lable为标签名,普通字符串最大长度为10 content:标签内显示的内容(html字符串或dom对象)
对于固定内容的标签数组直接使用“[...]”
var tabs = [new GInfoWindowTab("Tab1","This is tab1"),
new GInfoWindowTab("Tab2","This is tab2"),
]
对于内容需要更新的标签数组,则可以先定义数组,然后赋值。
var tabs = [];
tabs[0] = new GInfoWindowTab("Tab1","This is tab1");
tabs[1] = new GInfoWindowTab("Tab2","This is tab2");
...
tabs[N] = new GInfoWindowTab("TabN","This is tabN");
new Array()的方法定义也是可以的。
13.在GMarker()上显示 GInfoWindowTabs()多标签信息窗口对象
GMarker.openInfoWindowTabsHtml(tabs,opts?)
GMarker.openInfoWindowTabs(tabs,opts?)
注:注意标签内容的宽度,如果不设置宽度,当标签数量较多时,多窗口将发生错位,如下图:
14.关闭信息窗口:closeInfoWindow()
15.移除GControl()控件:removeControl(control)
16.移除GMarker()地标:removeOverlay(overlay) clearOverlays()
17.loadGeoInfo()接口 //服务器端数据调用接口
18.获取服务器端查询结果
异步调用:GXmlHttp对象 GDownloadUrl()函数
(1)使用GXmlHttp对象 :
代码示例:
var request = GXmlHttp.create();//创建GXmlHttp对象
request.open("GET","myfile.txt",true);//打开GXmlHttp true:异步为真
request..onreadystatechange() = function()
{
//判断状态,可根据不同状态做不同的相应,
if(requset.readyState==4)//完全加载的状态4
{
alert(request.responseText);
}
}
request.sent(null);
(2)使用GDownloadUrl()函数 //简化版的异步处理函数,只能使用Get方法,不判断加载状态,只是在完全加载后调用回调函数。
GDownloadUrl(url,onload)//url: onload:完全加载后的回调函数
GDownloadUrl("search.php?q="+q,function(data){
eval(data);//直接用eval执行返回的Javascript字符串
})
Google Maps 学习笔记(一)2014.06.04的更多相关文章
- Google Maps 学习笔记(二)地图天气预报服务 2014.06.04
地图天气预报服务:一,获取天气预报信息:二,解析天气预报信息:三,在地图上加载天气预报信息: Yahoo!提供的天气预报服务采用流行的RSS输出结果,接口地址如下: http://weather.ya ...
- Google Maps 学习笔记(三)
1.GPolyline折线对象和GPolygon多边形对象 html标签中必须包含v="urn:schemas-microsoft--com:vml"的命名空间 <html ...
- 再起航,我的学习笔记之JavaScript设计模式04
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 上回 ...
- google protobuf学习笔记:windows下环境配置
欢迎转载,转载请注明原文地址:http://blog.csdn.net/majianfei1023/article/details/45371743 protobuf的使用和原理,请查看:http:/ ...
- Google Guava学习笔记——基础工具类Preconditions类的使用
Preconditions类是一组静态方法用来验证我们代码的状态.Preconditons类很重要,它能保证我们的代码按照我们期望的执行,如果不是我们期望的,我们会立即得到反馈是哪里出来问题,现在我们 ...
- Google Guava学习笔记——基础工具类Splitter的使用
另一项经常对字符串的操作就是根据指定的分隔符对字符串进行分隔.我们基本上会使用String.split方法: String testString = "Monday,Tuesday,,Thu ...
- Google Guava学习笔记——基础工具类Joiner的使用
Guava 中有一些基础的工具类,如下所列: 1,Joiner 类:根据给定的分隔符把字符串连接到一起.MapJoiner 执行相同的操作,但是针对 Map 的 key 和 value. 2,Spli ...
- Google Guava学习笔记——简介
Google Guava是什么东西?首先要追溯到2007年的“Google Collections Library”项目,它提供对Java 集合操作的工具类.后来Guava被进化为Java程序员开发必 ...
- Google TensorFlow 学习笔记一 —— TensorFlow简介
"TensorFlow is an Open Source Software Library for Machine INtenlligence" 本笔记参考tensorflow. ...
随机推荐
- vb listview 的常用操作
常用操作:获取当前行数和列数: MsgBox "行数:" & ListView1.ListItems.Count & "列数:" & L ...
- MySql: Column 'XXXX' in field list is ambiguous 错误
[Err] 1052 - Column 'XXXX' in field list is ambiguous 例如: SELECT id, a.name, price, `describe`, scho ...
- SQL Server 固定角色
1. 查看固定服务器角色 execute sp_helpsrvrole; 管理: execute master..sp_addsrvrolemember @logingName='neeky' @ro ...
- Python调用C/C++动态链接库的方法详解
Python调用C/C++动态链接库的方法详解 投稿:shichen2014 这篇文章主要介绍了Python调用C/C++动态链接库的方法,需要的朋友可以参考下 本文以实例讲解了Python调用C/C ...
- Oracle EBS-SQL (SYS-2): sys_在线用户查询.sql
SELECT fs.USER_NAME, fu.description, fs.RESPONSIBILITY_NAME, fs.USER_FORM_NAME, ...
- 转 批处理 %~dp0的意义
http://nealcai.iteye.com/blog/1685192 http://blog.csdn.net/caz28/article/details/7448677 http://stac ...
- RejexLib
http://www.regexlib.com/ http://www.brics.dk/automaton/index.html http://code.google.com/p/automatap ...
- 一个大小为N的数组,里面是N个整数,怎样去除重复的数
题目:一个大小为N的数组,里面是N个整数,怎样去除重复的数字: 要求时间复杂度为O(n),空间复杂度为O(1). 需要除掉重复的整数的数组,注意这里我没有处理负数情况,其实负数情况只要先用0快排分一下 ...
- HTML标签CSS属性默认值汇总
HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...
- 对应第一篇文章api的编写
router.get('/api/tags/search/:list/:key/:page', function(req, res) { if(_.isEmpty(req.params.key)) { ...