开发者社区> 狗尾巴呢> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Open API 之 Google Map体验

简介: 上一个介绍了Open API的一些参考资源集 http://www.cnblogs.com/2018/archive/2011/08/27/2155274.html 下面以一个常用的google map这个open api为例说明如何应用 概念基础 目前的版本是3,相对版本2有较大服务的修改。
+关注继续查看

上一个介绍了Open API的一些参考资源集 http://www.cnblogs.com/2018/archive/2011/08/27/2155274.html

下面以一个常用的google map这个open api为例说明如何应用

概念基础

目前的版本是3,相对版本2有较大服务的修改。

Marker

用于在地图特定位置显示信息的一个图标

A marker is basically a small image that is positioned at a specific place on a map. Its most frequent incarnation is the familiar drop-shaped marker that is the default marker in Google Maps

相关和图标参考资料

http://gmaps-samples.googlecode.com/svn/trunk/markers/

http://code.google.com/p/google-maps-icons

如果一个区域显示太多的图标,查看起来不好区分,此时可以使用如下的工具库分组显示Marker:

MarkerClusterer

http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

http://google-maps-utility-libraryv3.googlecode.com/svn/tags/markerclusterer/1.0/

MarkerManager

http://google-maps-utility-libraryv3.googlecode.com/svn/tags/markermanager/1.0/

Marker Icon的相关地址

http://www.powerhut.co.uk/googlemaps/custom_markers.php

http://www.cycloloco.com/shadowmaker/shadowmaker.htm

http://www.cartosoft.com/mapicons/

InfoWindow

一般用于显示相关信息的窗口

Geocoding

Geocoding is an integrated part of the Google Maps API. When you send in an address, you get the

coordinates for that address back. It’s that simple! This is very handy in circumstances where you only have an address, but you still somehow want to automatically plot it on a map.

由于这个计算比较消耗资源,目前一个IP地址24小时内只运行2500个请求

API

Google map是基于Javascript提供的一个库应用支持,具体地址在

http://code.google.com/apis/maps/documentation/javascript/reference.html

例子

页面中引入google map API:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

通过API建立地图和相关的处理:

        // Creating a reference to the mapDiv
            var mapDiv = document.getElementById('map');
          
            // Creating a latLng for the center of the map beijing
            var latlng = new google.maps.LatLng(39.904, 116.407);
            var options = {
                    zoom: 10,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                        mapTypeIds: [
                            google.maps.MapTypeId.ROADMAP,
                            google.maps.MapTypeId.SATELLITE
                        ],
                        position: google.maps.ControlPosition.TOP_RIGHT
                    },
                    disableDefaultUI: false,
                    scrollwheel: true,
                    draggableCursor: 'move',
                    scaleControl: true,
                    disableDoubleClickZoom: true
            };
           
            // Creating the map
            map = new google.maps.Map(mapDiv, options);

效果:

image

以上例子具体地址:

https://skydrive.live.com/?cid=56b433ad3d1871e3&sc=documents&id=56B433AD3D1871E3%21266

下载后直接在浏览器即可查看,主要操作:

1、地图上点击出提示信息

2、点击“取坐标”,可以进行查询,同时显示一个Marker提示,在Marker上双击可以查看明细

可见,不多的代码我们就可以构建一个很丰富的应用。

参考

如何阅读API

方法

如构造函数方法如下:

Map(mapDiv:Node, opts?:MapOptions)

方法名,括号内是参数变量,参数定义如下:

variableName:variableType

冒号前是变量名,后是变量类型,变量名后有?,表示是可选参数

Data Types

类型有:原生类型(如string, number,boolean),自定义类型(如MouseEvent ,StreetviewPanorama)

需要注意的是: Array 和 MVCArrays 有些不同.

Array.<MapTypeId>

表示一个包含MapTypeId对象的数组类型

MVCArrays are a special kind of array, so the notation for them looks the same. Here’s what the overlayMapTypes property of the Map object looks like:

MVCArray.<MapType>

In this case, it means that the value for this property is an MVCArray that contains MapType objects.

The Namespace

All the classes of the Google Maps API reside in the namespace google.maps. That means whatever class or method you want to call always starts with google.maps. Here’s, for example, how to call the constructor for the Marker class:

new google.maps.Marker();

So, whenever you need to use a class or object, make sure to always insert the namespace name in front of it.

图书

Beginning Google Maps API 3 这本书对google API有详细的描述,具体参考

http://www.svennerberg.com/bgma3

http://www.apress.com/9781430228028

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
再见丑陋的 Swagger,这个API神器界面更炫酷,逼格更高,体验更好
代码未动,文档先行 其实大家都知道 API 文档先行的重要性,但是在实践过程中往往会遇到很多困难。 程序员最讨厌的两件事:1. 写文档,2. 别人不写文档。大多数开发人员不愿意写 API 文档的原因是写文档短期收益远低于付出的成本,然而并不是所有人都能够坚持做有长期收益的事情的。 作为一个前后端分离模式开发的团队,我们经常会看到这样的场景:前端开发和后端开发在一起热烈的讨论“你这接口参数怎么又变了?”,“接口怎么又不通了?”,“稍等,我调试下”,“你再试试..."。 那能不能写好 API 文档,大家都按文档来开发?很难,因为写文档、维护文档比较麻烦,而且费时,还会经常出现 API 更新了
0 0
体验 Orbeon form PE 版本提供的 JavaScript Embedding API
体验 Orbeon form PE 版本提供的 JavaScript Embedding API
0 0
参与 API 创新应用大赛,体验RDS备份恢复 API
开发者使用云数据库的过程中,处理基本的实例管理之外,用的最多的一项功能恐怕就是备份恢复,在此次API创新应用大赛上,我们也邀请了开发者来共同体验阿里云的RDS备份恢复API。
1241 0
参与 API 创新应用大赛,体验RDS CloudDBA数据库性能优化 API
阿里云的RDS数据库,有开发者所需要的一系列的功能,但很多功能很多开发者可能并没有使用过。这里,介绍一个RDS比较有用的功能:CloudDBA数据库性能优化 API。
12615 0
参与 API 创新应用大赛,体验RDS标签管理 API
对于企业用户而言,对于购买大量的数据库实例资源的情况,一个比较头疼的问题就是实例的分类管理的问题。而RDS的标签功能,通过给实例绑定标签,对实例进行轻松分类管理。
1158 0
参与 API 创新应用大赛,体验RDS费用管理 API
在使用云产品的过程中,对于企业用户而言,费用管理也是很重要的一环。阿里云的RDS就提供了费用管理的相关API,来帮助我们更好的对RDS使用费用进行管理。此次,在API创新应用大赛中,也有参赛者对RDS费用管理的API进行的体验,并提出了不少非常棒的建议。
1119 0
ASP.NET Core Web API 帮助页
ASP.NET Core Web API 帮助页
0 0
一文概览设计Web API 中的细节
一文概览设计Web API 中的细节
0 0
借助 Web Animations API 实现一个鼠标跟随偏移动画
借助 Web Animations API 实现一个鼠标跟随偏移动画
0 0
+关注
狗尾巴呢
从事研发20年 涉及桌面软件、嵌入式设备、C/S分层系统、B/S业务系统、互联网系统等等各类系统 语言涉及C/C++ .net系统 java系列 前端系列等等不同的类别 主控和主导了国家863项目,企业业务应用系统,自然语言翻译系统,数据库审计等系列的软件研发
文章
问答
文章排行榜
最热
最新
相关电子书
更多
CUDA Math API
立即下载
阿里云 API 精选手册(Alibaba Cloud API Playbook)
立即下载
重保场景及API安全指南
立即下载