`
yangyangmilan
  • 浏览: 30061 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

谷歌地图 简单入门

阅读更多

一、Hello world

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 </head>

<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&v=2.x&sensor=false&key=ABQIAAAANRezeZZ4Y86oPrQq_VldhRRVHwv1xZ1uiERqpxy2XNaDfXdQnhSgufHt51owMdzuslJluCsiEbNIPg" type="text/javascript"></script>

<body>

    <div id="mapContainer" style="height:600px; width:800px;"></div>

</body>

<script type="text/javascript">

     var map = new GMap2(document.getElementById("mapContainer"));

     map.setCenter(new GLatLng(33.0, 106.0), 5);

</script>

</html>

1.<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&v=2.x&sensor=false&key=ABQIAAAANRezeZZ4Y86oPrQq_VldhRRVHwv1xZ1uiERqpxy2XNaDfXdQnhSgufHt51owMdzuslJluCsiEbNIPg" type="text/javascript"></script>

网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签,使用注册 API 时收到的密钥。

key是密钥,v是版本

2.var map = new GMap2(document.getElementById("mapContainer")); 页面里必须有id为mapContainer的元素来放地图内容

3.map.setCenter(new GLatLng(33.0, 106.0), 5); 设置中心点,第一个参数是表示经纬度,第二个参数表示地图缩放等级。

 

二、简单讲解

1.<body onload="initialize()" onunload="GUnload()">

可以用initialize()方法来初始化地图,GUnload()方法是谷歌提供的,用来防止内存泄漏的实用工具函数。

2.new GLatLng(myLatitude, myLongitude)

myLatitude经度,myLongitude纬度

3.地图属性

G_NORMAL_MAP- 默认视图

G_SATELLITE_MAP - 显示 Google 地球卫星图像

G_HYBRID_MAP - 混合显示普通视图和卫星视图

G_DEFAULT_MAP_TYPES - 这三个类型的数组,在需要重复处理的情况下非常有用

map.setMapType(G_SATELLITE_MAP);

4.信息窗口

GMap2 对象提供了 openInfoWindow() 方法,该方法将一个点和一个 HTML DOM 元素作为参数。HTML DOM 元素附加到信息窗口容器中,信息窗口的尖端会固定在指定点上。

GMap2 的 openInfoWindowHtml() 方法相似,但是它使用 HTML 字符串作为其第二个参数而不是 DOM 元素。

map.openInfoWindow(map.getCenter(),

                   document.createTextNode("Hello, world"));

var myHtml= "<b>#" + number+ "</b><br/>" + message[number-1];

map.openInfoWindowHtml(map.getCenter(), myHtml);

5.事件监听器

1)点击地图后弹框

GEvent.addListener(map, "click", function() {

  alert("您点击了地图。");

});

2)拖动地图后,显示经纬度

GEvent.addListener(map, "moveend", function() {

 var center= map.getCenter();

  document.getElementById("message").innerHTML= center.toString();

});

3)带参数的事件

GEvent.addListener(map,"click", function(overlay, latlng) {    

  if (latlng) { 

   var myHtml= "GPoint 为: " + map.fromLatLngToDivPixel(latlng) + ",

缩放级别:" + map.getZoom();

    map.openInfoWindow(latlng, myHtml);

 }

});

 

三、添加控件

GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。

GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。

GSmallZoomControl - 小型缩放控件(无平移控件),用于在 Google 地图上显示行车路线的小地图弹出窗口。

GScaleControl - 地图比例尺

GMapTypeControl - 让用户切换地图类型(例如“地图”和“卫星”)的按钮

GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。

GOverviewMapControl - 位于屏幕一角的可折叠概览地图。

map.addControl(new GLargeMapControl());

 

所有这些控件都基于 GControl 对象。

GMapTypeControl 和 GHierarchicalMapTypeControl 是特殊情况,因为它们还可以进行配置。这些控件增加的功能可以更改 Google 地图 API 中的地图当前所用的 GMapType。有关配置这些控件的详细信息,请参见修改标准控件的结构。

下面是当前支持的地图类型列表:

•G_NORMAL_MAP 显示 Google 地图默认的普通二维图块

•G_SATELLITE_MAP 显示拍摄的图块

•G_HYBRID_MAP 同时显示拍摄的图块和普通(突出显示道路、城市名等明显地图特征)图块

•G_PHYSICAL_MAP 根据地形信息显示实际地图图块

 

addControl 方法有第二个可选的参数 GControlPosition,可用于指定控件在地图上的位置。它可以是以下值之一,这些值分别指定要放置控件的地图某个角:

•G_ANCHOR_TOP_RIGHT

•G_ANCHOR_TOP_LEFT

•G_ANCHOR_BOTTOM_RIGHT

•G_ANCHOR_BOTTOM_LEFT

如果不包含此参数,则地图 API 会使用控件指定的默认位置。

GControlPosition 还可以指定偏移量,来指示控件的放置位置与地图边界间隔多少像素。这些偏移量使用 GSize 对象指定。

var bottomRight= new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));

map.addControl(new GMapTypeControl(), bottomRight);

 

四、地图叠加层

叠加层是地图上绑定到经度/纬度坐标的对象,会随您拖动或缩放地图而移动。叠加层用于反映您“添加”到地图上以指明点、线或区域的对象。。

地图 API 有如下几种叠加层:

•地图上的点使用标记来显示,通常显示自定义图标。标记是 GMarker 类型的对象,并且可以利用 GIcon 类型的对象来自定义图标。

•地图上的线使用折线(表示点的集合)来显示。线是类型为 GPolyline 的对象。

•地图上的区域显示为多边形(如果是任意形状的区域)或底面叠加层(如果是矩形区域)。多边形类似于闭合的折线,因此可以是任何形状。地面叠加层通常用于地图上与图块有直接或间接关联的区域。

•地图本身使用图块叠加层显示。如果您有自己的系列图块,可以使用 GTileLayerOverlay 类来改变地图上已有的图块,甚至可以使用 GMapType 来创建您自己的地图类型。

•信息窗口也是一种特殊的叠加层。但是请注意,信息窗口会自动添加到地图中,并且地图只能添加一个类型为 GInfoWindow 的对象。

每个叠加层都实现 GOverlay 接口。可以使用 GMap2.addOverlay() 方法向地图添加叠加层,使用 GMap2.removeOverlay() 方法删除叠加层。

1)标记

map.addOverlay(new GMarker(new GLatLng(x,y)));

可以拖动的标记

标记可点击但不可拖动,所以它们需要通过将额外的标记选项 draggable 设置为 true 来初始化。

var marker= new GMarker(center, {draggable: true});

GEvent.addListener(marker, "dragstart", function() {

  map.closeInfoWindow();

 });

GEvent.addListener(marker, "dragend", function() {

  marker.openInfoWindowHtml("弹起来了...");

 });

map.addOverlay(marker);

2)图标(标记)

var blueIcon= new GIcon(G_DEFAULT_ICON);

blueIcon.image= "http://www.google.cn/intl/en_us/mapfiles/ms/micons/blue-dot.png";               

var markerOptions= { icon:blueIcon};

map.addOverlay(new GMarker(point, markerOptions));

3) 折线

折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色应是十六进制数字 HTML 样式,例如使用 #ff0000 而非 red。GPolyline 无法识别命名颜色。

GPolyline 对象使用浏览器的矢量绘制功能(如果可用)。在 Internet Explorer 中,Google 地图使用 VML(请参阅 XHTML 和 VML)绘制折线;在其他浏览器中使用 SVG(如果可用)。在所有其他环境中,我们从 Google 服务器请求一个线段图像并将该图像叠加到地图上,当地图缩放和拖动时按需要刷新图像。

以下代码段会在两点之间创建 10 像素宽的红色折线:

var polyline= new GPolyline([

 new GLatLng(39.9493, 116.3975),

 new GLatLng(39.9593, 116.4071)

], "#ff0000", 10);

map.addOverlay(polyline);

 

 

 

分享到:
评论

相关推荐

    谷歌地图开发快速入门

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

    google_map_api_开发快速入门

    1. **“Hello World”程序**:开发者通过简单的代码实现地图的显示,这是每个开发者入门的第一步。 2. **浏览器兼容性**:API需要考虑不同浏览器的兼容性问题,确保在多种环境下正常运行。 3. **XHTML与VML**:地图...

    Google地图API教程

    ### Google地图API教程:初学者入门指南 #### 一、Google地图API概览与基础知识 Google地图API是一种功能强大的工具,允许开发者在其网站或应用中嵌入和自定义Google地图,提供丰富的地理位置服务。本教程旨在帮助...

    我收集的谷歌地图API实例.doc

    #### 二、Google地图API入门:“Hello, World”示例 ##### 1. 加载Google地图API 要在网页中加载Google地图API,首先需要在HTML文档的`&lt;head&gt;`部分引入API的脚本文件。以下是一个典型的加载方式: ```html ...

    Android google Map入门

    创建一个简单的 Android 谷歌地图应用涉及到几个关键步骤: 1. **添加权限**:确保在 AndroidManifest.xml 文件中添加了访问网络和显示地图所需的权限。 2. **配置地图视图**:在布局文件中添加 `&lt;com.google....

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

    此外,还会涉及到一些高级话题,如通知(Notification)、多媒体处理、地图API集成(Google Maps API)、推送服务(例如Firebase Cloud Messaging)以及Android的多线程和异步编程模型,比如Handler、Looper和线程池...

    Google Maps与Ajax在Java Web集成地图信息

    在描述中提到,Google Maps API 使得在 Java Web 应用中集成地图变得更加简单。 2. **Ajax(Asynchronous JavaScript and XML)**:Ajax 是一种用于创建快速动态网页的技术,它允许页面在不重新加载整个页面的情况...

    类似googlemap的地图实现

    最后,对于初学者,建议从搭建一个简单的地图展示开始,逐步增加功能,如添加标记、搜索地点、绘制路径等。通过实践,你将逐渐掌握Web地图开发的核心技术,为更复杂的地理信息系统项目打下坚实基础。在学习过程中,...

    ajax简单入门讲解

    Ajax(Asynchronous JavaScript and XML...总结,Ajax简单入门主要涉及理解其基本概念、工作流程,掌握不同实现方式,并了解其在实际项目中的广泛应用。通过学习和实践,开发者可以有效地提高网页的交互性和用户体验。

    Google+Android开发入门与实战

    在《Google+Android开发入门与实战》中,实战部分将带领读者通过实际项目来巩固所学知识,例如开发一个简单的天气应用,涉及网络请求、JSON解析、动态加载数据等内容。这样的实战经验有助于提升解决问题的能力,并...

    google地图生成工具-易语言

    易语言是中国自主研发的一种简单易学的编程语言,其特点是语法简洁,适合初学者入门。这个工具可能帮助用户自定义地图视图、获取地理位置信息、标注点位、规划路线等。 【描述】"google地图生成工具"说明了该程序的...

    GISer入门指南--对外发布版本

    第二章《数据篇》介绍了获取地理空间数据的途径和工具,如稻歌GoogleMap截获器、地理空间数据云、国家综合地球观测数据共享平台和DIVA-GIS等,这些工具和平台为GIS数据的获取提供了便捷的途径,是学习和应用GIS不可...

    easy_google_maps:Easy Flutter谷歌地图

    Web和移动设备上的Flutter简易Google Maps 入门 移动的 遵循“移动设备”的设置 网页 好去! EasyGoogleMaps ( apiKey : 'YOUR_API_KEY_HERE' , address : 'Infinite Loop, Cupertino, CA 95014' , title : '...

    ASP+ACCESS电子地图 (完整版)

    它可能需要对接公开的地理信息服务,如谷歌地图API或OpenStreetMap API,获取地图瓦片或地理编码服务。 3. **用户界面**:HTML和JavaScript共同构建用户界面,JavaScript提供地图的交互功能,如地图的缩放和平移,...

    SuperMap iClient for Flex从入门到精通 第1章

    它能够与SuperMap iServer Java服务配合使用,也可以连接第三方地图服务,如天地图、Google Map、Microsoft Bing Maps和OpenStreetMap。 2. **“Hello,SuperMap iClient for Flex”** 开发一个简单的Web GIS系统...

Global site tag (gtag.js) - Google Analytics