谷歌地图开发入门

原创

wbj0110 2023-06-09 08:38:21 博主文章分类：计算机 ©著作权

文章标签 谷歌地图开发之入门 Google地图 Js 计算机 ViewUI 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者wbj0110的原创作品，请联系作者获取转载授权，否则将追究法律责任

现在lbs搞的红火的很，基于地图的交友购物交通服务更是多如牛毛，几天就主要对谷歌地图开发一点初步，另外发现mapabc的开发接口很是详细，如果不是

谷歌地图的话，感觉mapabc更容易入门，有很多现成的代码，学习起来更容易，对一些复杂的开发比较适合，例如房地产等开发，不过谷歌地图比较主流，一些简单的

开发还是比较好的使用，官方手册是最好的学习资料http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/overlays.html，下面就以

Google Maps JavaScript API V3 为例

1. <html>  
2. <head>  
3. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
4. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>  
5. <script type="text/javascript">  
6.   function initialize() {  
7.     var latlng = new google.maps.LatLng(-34.397, 150.644);  
8.     var myOptions = {  
9.       zoom: 8,  
10.       center: latlng,  
11.       mapTypeId: google.maps.MapTypeId.ROADMAP  
12.     };  
13.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
14.   }  
15.   
16. </script>  
17. </head>  
18. <body οnlοad="initialize()">  
19.   <div id="map_canvas" style="width:100%; height:100%"></div>  
20. </body>  
21. </html>

即使在这个简单的示例中，也有几点需要注意：

使用

script

我们创建一个名为“map_canvas”的

div

创建 Javascript 对象常量以保存若干地图属性。
编写 Javascript 函数以创建“map”对象。
我们从

body

标记的

onload

下文说明了这些步骤。

载入 Google Maps API

<html><head><metaname="viewport"content="initial-scale=1.0, user-scalable=no"/><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>

http://maps.google.com/maps/api/js 网址指向 Javascript 文件所在的位置，该文件会载入使用第 3 版 Google Maps API 所需的全部符号和定义。您的网页必须包含指向该网址的 script 标签。

此标头中的 <meta> 标签会指定如下内容：即应当以全屏模式显示该地图，且用户不能调整地图尺寸。（有关详细信息，请参见开发移动设备部分。）

请注意，我们还需要设置 sensor 参数，以指明此应用程序是否使用传感器确定用户的位置。在此示例中，我们将该参数设为变量“set_to_true_or_false”，用于强调您必须将该值显式设为 true 或 false。

地图 DOM 元素

<divid="map_canvas"style="width:100%; height:100%"></div>

要在网页上显示地图，我们必须为其留出一个位置。通常，我们的做法是创建一个名为 div 的元素，然后在浏览器的文档对象模型 (DOM) 中获取此元素的引用。

在上述示例中，我们定义了名为“map_canvas”的 <div> 并使用样式属性设置其大小。请注意，该尺寸已设置为“100％”，这将会展开地图，使之符合移动设备的屏幕尺寸。您可能需要根据浏览器的屏幕尺寸和填充区域调整这些值。请注意，地图总是会根据其中所包含的元素的大小决定其本身的尺寸，因此，您必须始终在 <div> 上显式设置一个适用的尺寸。

地图选项

var myLatlng =new google.maps.LatLng(-34.397,150.644);var myOptions ={
  zoom:8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

要初始化地图，我们需要先创建一个包含地图初始化变量的 Map options 对象。该对象不是构建出来的，而是以对象常量的形式创建出来的。由于我们要将地图的中心设定为某一特定的点，因此，我们还需要创建一个 latlng 值，以保存此位置信息并将其传递到地图的选项中。有关指定位置的详细信息，请参阅下面的纬度和经度部分。

我们还设置了初始缩放级别，并将 mapTypeId 设置为 google.maps.MapTypeId.ROADMAP。系统支持以下类型：

ROADMAP，用于显示 Google Maps 默认的普通二维图块。
SATELLITE，用于显示拍摄的图块。
HYBRID，用于同时显示拍摄的图块和突出特征（道路、城市名）图块层。
TERRAIN，用于显示自然地形图块，自然地形图块中会显示高度和水体特征（山脉、河流等）。

与 Google Maps 第 2 版 API 不同的是，第 3 版中没有设置默认地图类型。您必须明确设置一个初始地图类型，才能查看相应的图块。

google.maps.Map - 基本对象

var map =new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Map 类是表示地图的 JavaScript 类。此类的对象定义了网页上的单个地图。（您可以创建此类的多个实例，每个对象都将在网页上定义一个单独的地图。）我们使用 Javascript new 操作符创建此类的一个新实例。

创建新的地图实例时，您需要在网页中指定一个 <div> HTML 元素作为地图的容器。HTML 节点是 Javascript document 对象的子对象，而且我们通过document.getElementById() 方法获得该元素的引用。

此代码可定义一个名为 map 的变量，然后将该变量分配给新的 Map 对象，同时将该变量传递到在 myOptions 对象常量内定义的选项中。这些选项将会用于初始化地图的属性。Map() 函数称为“构造函数”，其定义如下：

构造函数	说明
google.maps.Map( opts?)	使用 `opts` 参数中已传递的可选参数创建新地图。

载入地图

<bodyοnlοad="initialize()">

呈现 HTML 网页时，会扩展文档对象模型 (DOM)，接收任何外部图像和脚本并将其合并到 document 对象中。为了确保系统在完全载入网页后才将我们的地图添加到网页上，我们只会在 HTML 网页的 <body> 元素收到 onload 事件后，才会执行用于构建 Map 对象的函数。这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。

body 标签的 onload 属性是事件处理程序的一个示例。Google Maps Javascript API 还提供了一组事件，可供您进行处理以确定状态变化。有关详细信息，请参阅地图事件部分。

查看示例 (map-simple.html)