`
wbj0110
  • 浏览: 1610261 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论
阅读更多

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

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

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

Google Maps JavaScript API V3 为例

 
 
 
[html] view plaincopy
  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 onload="initialize()">  
  19.   <div id="map_canvas" style="width:100%; height:100%"></div>  
  20. </body>  
  21. </html>  

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

  1. 使用 script 标记来加入 Maps API JavaScript。
  2. 我们创建一个名为“map_canvas”的 div 元素来承载该地图。
  3. 创建 Javascript 对象常量以保存若干地图属性。
  4. 编写 Javascript 函数以创建“map”对象。
  5. 我们从 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 参数中已传递的可选参数创建新地图。

载入地图

  <bodyonload="initialize()">

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

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

查看示例 (map-simple.html)

纬度和经度

我们还需要一种引用各种地图位置的方法。在 Google Maps API 中,google.maps.LatLng 对象提供了此类机制。您可以构建一个 LatLng 对象,以 {纬度, 经度} 的顺序传递其参数:

  var myLatlng =new google.maps.LatLng(myLatitude, myLongitude)

请注意:将“地址”转变为地理地点的过程叫做“地址解析”。此版本的 Google Maps API 可支持地址解析。有关详细信息,请参见服务部分中的地址解析

LatLng 对象在 Google Maps API 中用途广泛。例如,google.maps.Marker 对象会在其构造函数中应用 LatLng,并在地图上所指定的地理位置上添加标记 叠加层

地图类型

Google Maps API 中提供了多种地图类型。除了用户熟悉的“绘制”道路地图图块,Google Maps API 还可支持其他地图类型。这些地图类型是通过使用 mapTypeId 属性,在地图的 Map options 对象中设置的。

Google Maps API 提供了以下地图类型:

  • MapTypeId.ROADMAP,用于显示默认的道路地图视图
  • MapTypeId.SATELLITE,用于显示 Google 地球卫星图像
  • MapTypeId.HYBRID,用于同时显示普通视图和卫星视图
  • MapTypeId.TERRAIN,用于根据地形信息显示实际地图。

您可以通过调用地图的 setMapTypeId() 方法更改地图的类型。

分享到:
评论

相关推荐

    谷歌地图开发快速入门

    **谷歌地图开发快速入门** 谷歌地图API是Google提供的一项服务,允许开发者利用JavaScript技术构建基于Google Maps的应用和服务。这个API让开发者能够自定义地图显示、添加标记、实施地理编码、规划路线、执行本地...

    《Google Android开发入门与实战》.pdf

    《Google Android开发入门与实战》是一本针对Android平台应用开发的全面指南,旨在帮助有一定软件开发经验的程序员快速进入Android开发领域。本书通过详细讲解Android的基础知识、环境搭建、SDK介绍、Market使用以及...

    Google+Android开发入门与实战

    《Google+Android开发入门与实战》是一本专为Android初学者设计的教程,它将带你逐步踏入Android应用开发的世界。本书不仅适合有一定编程基础的技术人员,也适合对移动开发感兴趣的非技术人员,通过深入浅出的方式...

    Google Android开发入门与实战.pdf

    根据提供的信息,我们可以总结出以下关于“Google Android开发入门与实战”的相关知识点: ### 一、Google Android开发入门与实战概述 #### 1.1 内容简介 《Google Android开发入门与实战》是一本面向Android开发...

    离线google地图API(含sample)+瓦片下载资源

    离线Google地图API是开发者在没有网络连接时仍然可以使用谷歌地图服务的一种技术。这个API主要是基于JavaScript构建,特别是V3版本,它提供了丰富的功能,让开发者能够在本地环境中展示地图数据。本文将深入探讨离线...

    Google Map开发入门好东西

    如果你想调用谷歌地图API进行二次开发,这绝对可以帮得到你

    Google Android开发入门与实战 pdf+ex07源码

    "Google Android开发入门与实战"这个资源提供了一个全面的学习路径,涵盖了Android应用开发的关键方面。这本书结合了理论知识和实际的源代码,使得学习过程更加直观和有效。 首先,让我们讨论Android开发的基础知识...

    google_map_api_开发快速入门

    《Google Map API 开发快速入门》 Google Map API 是Google为全球开发者提供的一个强大工具,允许他们利用Google Maps的功能创建自定义的地图应用。这个API涵盖了从基础的地图展示到复杂的地理位置服务,如路线规划...

    google android开发入门与实战原书和示例源码

    《Google Android开发入门与实战》是一本专为初学者设计的Android应用开发指南,它涵盖了从基础到进阶的所有重要概念和技术。这本书结合了理论知识和实战案例,旨在帮助读者快速掌握Android应用开发的核心技能。 在...

    Google.Android开发入门与实战

    本书作者较早就从事Android的研究与开发工作,为了帮助开发者更快地进入Android开发行列,他们不辞辛劳地编写了Android开发教程-《Google Android开发入门与实战》。本书系统讲解了Android软件开发的基础知识,...

    Google Android开发入门与实战的代码

    Google Android开发入门与实战的代码 1章 掀起你的盖头来——初识Android. 1 1.1 认识Android 1 1.2 Android的背景 2 1.2.1 Android的历史 2 1.2.2 Android的发展 2 1.3 我的Android我做主 2 ...

    Delphi APP 开发入门 PDF電子文檔 包含数据库与GPS定位讲解

    《Delphi APP 开发入门》PDF电子文档涵盖了基础到进阶的Delphi应用程序开发知识,特别强调了数据库集成和GPS定位技术的应用。这份资源对于初学者或是希望拓展Delphi移动应用开发技能的开发者来说,是一份宝贵的教程...

    Android开发从入门到精通-扶松柏版

    此外,这本书可能会介绍一些关于Android应用的高级话题,比如多媒体应用开发、地图服务集成、推送服务的使用等。通过这些高级话题的介绍,读者将有能力构建更加丰富和专业的Android应用。对于希望成为Android开发...

    《Java和Android开发实战详解》第18章 Google地图与定位服务代码-by 南邮-陈杨

    第18章讲解了GPS定位服务与Google地图开发的知识。  《Java和Android开发实战详解》适合Android开发入门者、Java程序员,以及作为大中专院校相关专业师生的学习用书,也可作为培训学校的教材。 第18章 Google地图...

    android开发入门与实战

    《Android开发入门与实战》是一本专为初学者设计的指南,旨在帮助新手迅速掌握Android应用开发的基础知识和实战技能。书中的内容丰富多样,涵盖了从基础理论到实际项目开发的全过程,使得学习者能够在实践中巩固理论...

    类似google地图

    标题 "类似Google地图" 暗示我们正在讨论一个与谷歌地图类似的应用程序或系统,可能涉及地理信息系统(GIS)和在线地图服务的开发。在IT行业中,这通常包括使用Web技术,如JavaScript库(例如Leaflet或OpenLayers)...

Global site tag (gtag.js) - Google Analytics