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

相关文章
|
人工智能 Java API
Google Gemini API 接口调用方法
Google 最近发布的 Gemini 1.0 AI 模型通过其升级版,Gemini,标志着公司迄今为止最为强大和多功能的人工智能技术的突破。
|
编解码
Open Google Earth Engine(OEEL)——matrixUnit(...)中产生常量影像
Open Google Earth Engine(OEEL)——matrixUnit(...)中产生常量影像
179 0
|
9月前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
472 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储 API
Map常用API
Map常用API
96 2
|
Android开发
如何在Android真机上检测是否有Google Map add-on
如何在Android真机上检测是否有Google Map add-on
142 3
|
存储 算法 Java
Go 通过 Map/Filter/ForEach 等流式 API 高效处理数据
Go 通过 Map/Filter/ForEach 等流式 API 高效处理数据
|
人工智能 自然语言处理 API
深度融合与创新:Open API技术促进AI服务生态构建
【7月更文第21天】在数字化转型的浪潮中,人工智能(AI)已从概念探索走向实际应用,深刻改变着各行各业。Open API(开放应用程序接口)作为连接技术与业务的桥梁,正成为推动AI服务普及和生态构建的关键力量。本文将探讨Open API技术如何通过标准化、易用性和灵活性,加速AI服务的集成与创新,构建一个更加丰富多元的AI服务生态系统。
611 2
|
人工智能 自然语言处理 搜索推荐
探索AI驱动的未来:Open API如何赋能企业数字化转型
【7月更文第21天】在当今这个数据为王、智能引领的时代,人工智能(AI)已不再是遥远的概念,而是深深融入到各行各业,成为推动企业数字化转型的重要引擎。随着技术的不断成熟与开放,Open API(开放应用程序接口)作为一种连接技术与业务的桥梁,正以前所未有的方式赋能企业,加速其智能化进程。本文将深入探讨Open API如何通过简化集成、促进创新、提升效率等途径,助力企业在AI时代中乘风破浪,实现数字化转型的华丽蜕变。
300 1
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
330 1