Google Maps基础及实例解析

Google Maps 基础

创建一个简单的 Google 地图

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

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

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&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）

实例解析

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

应用为什么要声明 HTML5?

<!DOCTYPE html>

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

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

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

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

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

添加 Google 地图 API Key

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

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

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

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

HTTPS

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

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

异步加载

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

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

实例

<!DOCTYPE html>
<html>
<head>
<script>
function initialize()
{
 var mapProp = {
 center: new google.maps.LatLng(51.508742,-0.120850),
 zoom:7,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

function loadScript()
{
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
 document.body.appendChild(script);
}

window.onload = loadScript;
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:500px;"></div>

</body>
</html>

定义地图属性

在初始化地图前，我们需要先创建一个 Map 属性对象来定义一些地图的属性：

var mapProp = {
 center:new google.maps.LatLng(51.508742,-0.120850),
 zoom:7,
 mapTypeId: google.maps.MapTypeId.ROADMAP
};

center（中心点）

中心属性指定了地图的中心，该中心通过坐标（纬度，经度）在地图上创建一个中心点。

Zoom（缩放级数）

zoom 属性指定了地图的 缩放级数。zoom: 0 显示了整个地球地图的完全缩放。

MapTypeId（地图的初始类型）

mapTypeId 属性指定了地图的初始类型。

mapTypeId包括如下四种类型：

google.maps.MapTypeId.HYBRID：显示卫星图像的主要街道透明层
google.maps.MapTypeId.ROADMAP：显示普通的街道地图
google.maps.MapTypeId.SATELLITE：显示卫星图像
google.maps.MapTypeId.TERRAIN：显示带有自然特征（如地形和植被）的地图

在哪里显示 Google 地图

通常 Google 地图使用于 <div> 元素中：

<div id="googleMap" style="width:500px;height:380px;"></div>

注意： 地图将以div中设置的大小来显示地图的大小，所以我们可以在 <div> 元素中设置地图的大小。

创建一个 Map 对象

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

以上代码使用参数(mapProp)在<div> 元素 (id为googleMap) 创建了一个新的地图。

提示：如果想在页面中创建多个地图，你只需要添加新的地图对象即可。

以下实例定义了四个地图实例 (四个地图使用了不同的地图类型):

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
 var mapProp = {
 center: new google.maps.LatLng(51.508742,-0.120850),
 zoom:9,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var mapProp2 = {
 center: new google.maps.LatLng(51.508742,-0.120850),
 zoom:9,
 mapTypeId: google.maps.MapTypeId.SATELLITE
 };
 var mapProp3 = {
 center: new google.maps.LatLng(51.508742,-0.120850),
 zoom:9,
 mapTypeId: google.maps.MapTypeId.HYBRID
 };
 var mapProp4 = {
 center: new google.maps.LatLng(51.508742,-0.120850),
 zoom:9,
 mapTypeId: google.maps.MapTypeId.TERRAIN
 };
 var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
 var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
 var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
 var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>

</body>
</html>

加载地图

窗口载入后通过执行 initialize() 函数来初始化 Map 对象，这样可以确保在页面完全载入后再加载 Google 地图：

google.maps.event.addDomListener(window, 'load', initialize);

以上就是对Google 地图基础资料的整理，后续继续补充，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • Android调用google地图生成路线图实现代码

    Android程序调用本机googlemap,传递起始和终点位置,生成路线图 复制代码 代码如下: if (wodeweizhiPoint != null) { if (wodeweizhiPoint.getLatitudeE6() != 0) { float chufajingdu = (float) (wodeweizhiPoint.getLongitudeE6() / 1E6); float chufaweidu = (float) (wodeweizhiPoint.getLatitude

  • google地图的路线实现代码

    复制代码 代码如下: <script language="javascript" type="text/javascript"> //add by ahuinan 2009-8-17 //initialize(23.165613663312594,113.35968017578125) var map; var gdir; var marker2; var hasMarker = false; var hotelLatLng = new GLatLng(

  • js+html5获取用户地理位置信息并在Google地图上显示的方法

    本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your position:</p> <button onclick="getLocation()">Try It</button&

  • php使用google地图应用实例

    本文实例讲述了php使用google地图应用方法.分享给大家供大家参考.具体如下: php代码如下: 复制代码 代码如下: function selected ( $param , $value ) {  if ( $param == $value ) print "SELECTED" ;  }   # Collect any form data to control the display   $scale = 10 ;  $maptype = "G_NORMAL_MAP&

  • 新云管理系统3.0版 Google地图生成器提供了，测试了，好用

    新云管理系统Google地图生成器for v3.0 版 它的好处不用我多说,但有一点需要声明,程序是官方商业版里东西,3.0版之前只对生成了HTML页面的网站有效,并且只能生成文章和下载频道 2.1版演示地址:http://code.feyu.cn/sitemap.xml 3.0版演示地址:http://www.feyu.cn/sitemap.xml 最新修正ASP动态生成地图 演示地址:http://vip.feyu.cn/sitemap.xml 只要解压上传至网站根目录,运行一下就行了,然后

  • Google Maps基础及实例解析

    Google Maps基础及实例解析

    Google Maps 基础 创建一个简单的 Google 地图 现在让我们创建一个简单的 Google 地图. 以下是显示了英国伦敦的 Google 地图: 实例 <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script>

  • 为IP查询添加GOOGLE地图功能的代码

    1. 在使用google api之前,我们需要先申请一个key,作为唯一的标示加在url后面. 2. google地图api里面有一个可以查询到某个地点的详细信息的地址,例如查询北京的:http://maps.google.com/maps/geo?q=beijing 3. 我们还可以把上面的地址后面加一个参数,让它输出我们想要的数据,例如我们需要csv的数据,那么地址就成了http://maps.google.com/maps/geo?q=beijing&output=csv 4. 这样我们就

  • C++基础知识实例解析（一）

    今天小编和大家一起通过几个实例学习C++基础知识,下面进行实例解析: [1-1]编写一个程序,实现一个整数.长整数.浮点数和双精度数除以2的计算. [分析]这是一个典型的函数重载的程序.声明函数div()为除法函数,每个函数的功能基本都是一致的,不同的只是形式参数的类型不同而已.程序代码如下: #include <iostream> using namespace std; int division(int x){ return x/2; } long division(long x){ re

  • java线程的基础实例解析

    java中建立线程可以有两种方式,分别是继承Thread类和实现Runnable接口. 继承Thread public class MyThread extends Thread{ public MyThread(String name){ super(name); } int i; public void run(){ for(i=0;i<5;i++){ System.out.println(getName()+"--"+i); } } public static void m

  • Sql Server中Substring函数的用法实例解析

    Sql Server中Substring函数的用法实例解析

    SQL 中的 substring 函数是用来抓出一个栏位资料中的其中一部分.这个函数的名称在不同的资料库中不完全一样: MySQL: SUBSTR( ), SUBSTRING( ) Oracle: SUBSTR( ) SQL Server: SUBSTRING( ) SQL 中的 substring 函数是用来截取一个栏位资料中的其中一部分. 例如,我们需要将字符串'abdcsef'中的'abd'给提取出来,则可用substring 来实现: select substring('abdcsef'

  • Vue动态组件实例解析

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件 <div id="example"> <button @click="change">切换页面</button> <component :is="currentView"></compon

  • Google 地图叠加层实例讲解

    Google 地图叠加层实例讲解

    Google 地图 - 叠加层 叠加层是地图上绑定到经度/纬度坐标的对象,会随您拖动或缩放地图而移动. Google 地图 API 有如下几种叠加层: 1.地图上的点使用标记来显示,通常显示自定义图标.标记是 GMarker 类型的对象,并且可以利用 GIcon 类型的对象来自定义图标. 2.地图上的线使用折线(表示点的集合)来显示.线是类型为 GPolyline 的对象. 3.地图上的区域显示为多边形(如果是任意形状的区域)或底面叠加层(如果是矩形区域).多边形类似于闭合的折线,因此可以是任何

  • SpringMVC文件上传功能实例解析

    SpringMVC文件上传功能实例解析

    说明: 文件上传的途径 文件上传主要有两种方式: 1.使用Apache Commons FileUpload元件. 2.利用Servlet3.0及其更高版本的内置支持. 客户端编程 1.为了上传文件,必须将HTML表格的enctype属性值设为multipart/form-data,像下面这样: <form action="action" enctype="multipart/form-data" method="post"> Sel

  • C++调用Python基础功能实例详解

    c++调用Python首先安装Python,以win7为例,Python路径为:c:\Python35\,通过mingw编译c++代码. 编写makefile文件,首先要添加包含路径: inc_path += c:/Python35/include 然后添加链接参数: ld_flag += c:/Python35/libs/libpython35.a 在源文件中添加头文件引用: #include "Python.h" Python解释器需要进行初始化,完成任务后需要终止: void s

  • C++函数模板与类模板实例解析

    本文针对C++函数模板与类模板进行了较为详尽的实例解析,有助于帮助读者加深对C++函数模板与类模板的理解.具体内容如下: 泛型编程(Generic Programming)是一种编程范式,通过将类型参数化来实现在同一份代码上操作多种数据类型,泛型是一般化并可重复使用的意思.泛型编程最初诞生于C++中,目的是为了实现C++的STL(标准模板库). 模板(template)是泛型编程的基础,一个模板就是一个创建类或函数的蓝图或公式.例如,当使用一个vector这样的泛型类型或者find这样的泛型函数

  • python并发编程之线程实例解析

    python并发编程之线程实例解析

    常用用法 t.is_alive() Python中线程会在一个单独的系统级别线程中执行(比如一个POSIX线程或者一个Windows线程) 这些线程将由操作系统来全权管理.线程一旦启动,将独立执行直到目标函数返回.可以通过查询 一个线程对象的状态,看它是否还在执行t.is_alive() t.join() 可以把一个线程加入到当前线程,并等待它终止 Python解释器在所有线程都终止后才继续执行代码剩余的部分 daemon 对于需要长时间运行的线程或者需要一直运行的后台任务,可以用后台线程(也称

随机推荐