GoogleMap API入门使用
关于Google Map API的使用说明 1.Google Map API介绍 a) Google 地图 API 是一种通过 JavaScript 将 Google 地图嵌入到您的网页的 API。该 API 提供了大量实用工具用以处理地图(正如 http://maps.google.com 网页上的地图),并通过各种服务向地图添加内容,从而使您能够在您的网站上创建功能全面的地图应用程序。 2.相关函数调用以及在实际项目中的应用 a) 首先注册一个google帐号,http://code.google.com/intl/zh-CN/apis/maps/signup.html随后在上述地址上面生成对应的Key,比如我们得到的Key为ABQIAAAAhrsyA85kX5AhsROY61ghERSePc6gwvi5Rm1hdFkqvyx4TFycQxSUo39qJRxqmJjnbPYhTiCZ8RbpWQ,这个Key在加载google map对应的js的时候需要用到。 b) 第一个简单的例子 我们先引入如下js脚本 <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAhrsyA85kX5AhsROY61ghERSe1hdFkqvyx4TFycQxSUo39qJRxqmJjnbPYhTiCZ8RbpWQ&sensor=true" type="text/javascript"> </script> 然后为我们的主窗体添加如下事件 view plaincopy to clipboardprint? <div id="map_canvas" style="width:500px;height: 300px"></div> </body> <div id="map_canvas" style="width:500px;height: 300px"></div> </body> 编写如下函数加载地图到id为map_canvas的DIV中 view plaincopy to clipboardprint? var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(39.9493, 116.3975), 13); } var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(39.9493, 116.3975), 13); } 同时,我们可以设置一些标注点,比如 view plaincopy to clipboardprint? var marker = new GMarker(point); var message = [ "这", "是", "个", "秘密", "消息" ]; marker.value = number; GEvent.addListener(marker, "click", function() { var myHtml = "<b>#" + number + "</b><br/>" + message[number - 1]; map.openInfoWindowHtml(point, myHtml); }); } var marker = new GMarker(point); var message = [ "这", "是", "个", "秘密", "消息" ]; marker.value = number; GEvent.addListener(marker, "click", function() { var myHtml = "<b>#" + number + "</b><br/>" + message[number - 1]; map.openInfoWindowHtml(point, myHtml); }); } Point 为一个GLatLng类型的对象,number为任意字符串,map为当前地图。new GMarker(point)初始化一个标注点,参数为该点的GLatLng, var myHtml = "<b>#" + number + "</b><br/>" + message[number - 1]; map.openInfoWindowHtml(point, myHtml); }); var myHtml = "<b>#" + number + "</b><br/>" + message[number - 1]; map.openInfoWindowHtml(point, myHtml); }); 为该标注点marker注册一个click事件,当单击该标注点的时候会弹出一个带有箭头的矩形InfoWindow,由map.openInfoWindowHtml(point, myHtml)函数实现。 在Googel地图中,相关的放大或者缩小按钮,视图模式都是由控件标识,添加控件时不指定相应的位置,比如 map.addControl(new GMapTypeControl());加入一个地图类型控件,可以切换为卫星视图或者地图视图 GLatLng表示一个含有经度和纬度的一个类,表示了某个地址在地理信息系统中的唯一位置,下面介绍如何得到某点具体的GLatLng 打开google地图,在google地图上查询到 绵阳市公安局涪城区分局的具体地址为:四川省绵阳市四川省绵阳市红星街95号,在该标注点上点击右键:在此放置居中位置 单击地图上分享连接这个按钮 分析第一个地址 注意红色的地方就是 四川省绵阳市四川省绵阳市红星街95号 在GIS中的具体位置 var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(31.45454, 104.755626), 13); } 更改里面的GLatLng就可以得到四川省绵阳市四川省绵阳市红星街95号附近的地图 Google Map提供了灵活的API接口功能,能让使用者灵活的应用,比如在地图上加上标注 view plaincopy to clipboardprint? map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GSmallZoomControl()); map.setCenter(new GLatLng(28.549809, 102.177082), 9); directionsPanel = document.getElementById("route"); directions = new GDirections(map, directionsPanel); directions.load("from: " + start + " to: " + end, { travelMode : G_TRAVEL_MODE_DRIVING }); } map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GSmallZoomControl()); map.setCenter(new GLatLng(28.549809, 102.177082), 9); directionsPanel = document.getElementById("route"); directions = new GDirections(map, directionsPanel); directions.load("from: " + start + " to: " + end, { travelMode : G_TRAVEL_MODE_DRIVING }); } Start为起始地点,end为结束地点,div:route用于显示行车路线信息,travelMode的可选项为G_TRAVEL_MODE_DRIVING或者G_TRAVEL_MODE_WALKING |
GoogleMap API入门使用相关推荐
- openresty开发系列11--openresty的api入门
openresty开发系列11--openresty的api入门 1)ngx_lua模块的hello world 编辑nginx下conf配置文件nginx.conf # vi nginx.conf ...
- Windows API入门系列之七 -完善MessageBox
原创文章,转载请注明作者和出处 http://www.cnblogs.com/beyond-code SDK编程群号:81543028 欢迎加入 各位不好意思,前几天有些事很忙,昨天才稍稍有时间空闲下 ...
- Hadoop MapReduce编程 API入门系列之压缩和计数器(三十)
不多说,直接上代码. Hadoop MapReduce编程 API入门系列之小文件合并(二十九) 生成的结果,作为输入源. 代码 package zhouls.bigdata.myMapReduce. ...
- HBase编程 API入门系列之HTable pool(6)
HTable是一个比较重的对此,比如加载配置文件,连接ZK,查询meta表等等,高并发的时候影响系统的性能,因此引入了"池"的概念. 引入"HBase里的连接池" ...
- Angular和.NET Core Web API入门应用程序
下载源160.2 KB 您可以在此处查看此项目的源代码和最新更新 这是Angular/.NET Core Web API入门应用程序,具有添加.编辑和删除客户的基本功能,因此您可以将其用作构建应用程序 ...
- 高德地图怎么画圈_高德地图 Javascript API 入门(二)
高德地图 Javascript API 入门(二) 鼠标工具插件 测量距离 JS map.plugin(["AMap.MouseTool"],function () { var m ...
- IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应
(转)IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应 IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发POISearch搜索附近停车场,附近加油 ...
- Hadoop MapReduce编程 API入门系列之查找相同字母组成的字谜(三)
找出相同单词的所有单词.现在,是拿取部分数据集(如下)来完成本项目. 项目需求 一本英文书籍包含成千上万个单词或者短语,现在我们需要在大量的单词中,找出相同字母组成的所有anagrams(字谜). 思 ...
- 淘宝 TOP 平台Open API入门篇
淘宝 TOP 平台Open API入门篇 [未经本人许可 严禁转载] 前不久刚写了一篇关于淘宝Open API的入门教程,具体见http://blog.csdn.net/hereweare2009/a ...
最新文章
- 释放联接新价值,华为提出“1+N”5G目标网,推动运营商构筑四大数字化转型的核心能力
- MPB:军科院杨瑞馥、毕玉晶等-​​培养组学方法优化(视频)
- 《Visual C++数字图像模式识别技术详解(第2版)》一3.4 形状特征
- CTFshow 反序列化 web257
- python中sorted()函数的用法
- 20万人仍然每天活跃在“死”掉的ofo APP上:这已变成一个返利应用
- 中国石油计算机第二次在线作业,中国石油大学(北京)计算机应用基础第二次在线作业1教程.docx...
- junit可执行但控制层无法执行_Junit测试时ContextLoader.getCurrentWebApplicationContext()返回空值...
- 基于Spring开发的DUBBO服务接口测试
- vb如何测试连接mysql_VB怎么连接访问Access数据库?
- .Net Core----关于MVC中TempData持久化问题
- 学习jQuery formValidator
- System学习笔记005---如何查看远程的一台电脑的某个端口有没有打开_centos查看某个端口是否打开
- error: src refspec main does not match any
- 网络管理员掌握的学习方法
- win10 小娜搜索没法用(语音能用 搜索框不能用)
- ERP/MIS系统中集成命令行式的功能调用
- 查看linux版本是多少位
- ZZULIOJ1086: ASCII码排序(多实例测试)
- 自适应流媒体传输(五)——正确认识码率切换