高德地图

最新推荐文章于 2024-08-30 07:36:01 发布

cgt_0812

最新推荐文章于 2024-08-30 07:36:01 发布

阅读量371

点赞数

CC 4.0 BY-SA版权

文章标签：高德地图

本文链接：https://blog.youkuaiyun.com/cgt_0812/article/details/78810951

1.Google地图的使用

通过以下步骤我们可以免费获取 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)。

实例

<!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false"> </script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>

实例解析

我们以以上实例来解析 Google 地图的创建过程。

应用为什么要声明 HTML5?

<!DOCTYPE html>

大多数浏览器使用 "标准模式" 的 HTML5 文档渲染页面，这就意味着你的应用是兼容各大浏览器的。

另外，如果没有DOCTYPE标签，浏览器则使用混杂模式 (quirks mode)进行渲染页面内容。

提示： 应该注意的是一些"混杂模式 "中的CSS并不能使用与标准模式中。在具体的应用中，所有基于百分比的大小都必须从父块元素继承。如果在父模块中没有指定大小，默认值为 0 x 0 像素。如果你想使用百分比，可以在<style> 标签中声明，如下所示：

这个样式声明表明地图模块的（GoogleMap）应 HTML高度为100%。

添加 Google 地图 API Key

在以下实例中第一个<script> 标签中必须包含 Google 地图 API：

将google生成的 API key 放置于 key 参数中(key=YOUR_API_KEY)。

The sensor 参数是必须的，该参数用于指明应用程序是否使用一个传感器 (类似 GPS 导航) 来定位用户的位置。参数值可以设置为 true 或者 false。

HTTPS

如果你的应用是安全的HTTP(HTTPS:HTTP Secure)应用,你可以使用 HTTPS 来加载 Google 地图 API：

异步加载

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

以下实例使用了 window.onload 来实现页面完全载入后加载 Google 地图。 loadScript() 函数创建了加载 Google 地图 API <script> 标签。此外在标签的末尾添加了 callback=initialize 参数， initialize()作为回调函数会在API完全载入后执行：

实例

function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript;