打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Google地图API 教程(一)

一、什么是 API?

API = 应用程序编程接口(Application programming interface)。

API(Application Programming Interface,应用编程接口)其实就是操作系统留给应用程序的一个调用接口,应用程序通过调用操作系统的 API 而使操作系统去执行应用程序的命令(动作)。

二、Google 地图 API

Google 地图API Key


开始学习本教程前,你需要在Google上申请一个指定的API key。

通过以下步骤我们可以免费获取 API key 。

访问 https://code.google.com/apis/console/, 使用你的Google账号登陆。

登陆后会出现如下界面:

点击 'Create Project' 按钮。

在服务列表中找到 Google Maps API v3, 然后点击 'off'(关闭) 让其开启该服务器


在下一个步骤中,选择'I Agree...' 然后点击 'Accept' 按钮。 现在你在服务列表中应该就可以看到 Google Maps API v3 已经变为 'on'(开启)状态。

接着在左侧菜单中点击 'API Access' ,在右侧栏中将看到以下提示 'Create an OAuth 2.0 client id...'。


点击 'Create an OAuth 2.0 client id...',将弹出一个表单,表单需要你填入你的项目名称,项目图片或者logo,然后点击 'Next' 按钮。


然后,我们需要选择应用类型 ('Web application' :网站应用), 然后填写你的站点地址,之后点击 'Create Client Id' 按钮即可。


最后我们就可以得到我们需要的 API key,如下图所示:

注意: 保存你的API key! ( 在填写的指定 URL 中开发所有的 Google 地图应用你需要使用该API key)。

三、Google 地图基础

Google Maps 基础

创建一个简单的 Google 地图

现在让我们创建一个简单的 Google 地图。

以下是显示了英国伦敦的 Google 地图:






异步加载

同样我们也可以在页面完全载入后再加载 Google 地图 API。

以下实例使用了 window.onload 来实现页面完全载入后加载 Google 地图 。 loadScript() 函数创建了加载 Google 地图 API

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Google Maps基础及实例解析
Google Map JavaScript API v3 常用功能总结
Google Map API V3 离线版
Google Maps开放API了,先做了张图过过瘾
Google Map API使用详解(六)——Google Map API Key的解读和使用技巧
Google Maps Api介绍与基础操作 | 幼学笔记
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服