[Map]Google Map学习(一) 简单的Google Map,Google Map基础

baacloud免费翻墙vpn注册使用

Google地图API

1、 什么是Google地图API
  Google地图API是一种通过JavaScriptGoogle地图嵌入到您的网页的API。它提供了很多处理地图的功能(类似网页http://ditu.google.cn/上的那些功能)和向地图添加内容的服务,让您能够在您的网站上创建功能全面的地图应用。
一个地图API密钥只对一个“目录”或域有效(你必须有Google 帐户才能获得地图API密钥,并且API密钥会和你的Google账户联系)。
2、 地图基础知识
Google地图的“Hello World
开始学习Google地图API最简单的方式是看一个简单的示例。线面的网页显示以北京的故宫博物院为中心的500*500的地图。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoogleMapDemo.aspx.cs" Inherits="GoogleMap.GoogleMapDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"
            type="text/javascript">
    </script>
     <script type="text/javascript">
        function intialize(){
            if(GBrowserIsCompatible()){
                var map = new GMap2(document.getElementById("map_canvas"));
                map.setCenter(new GLatLng(39.9493116.3975),13);
            }
        }
     </script>   
</head>
<body onload="intialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 500px;"></div>
</body>
</html>
 
即使在此简单的示例中,也需要注意五点:
        1、使用script标签包含Google地图API
        2、创建名为"map_canvas"的div元素来包含地图。
        3、编写JavaScript函数创建"map"对象。
        4、将地图的中心设置为制定的地理点。
        5、从body标签的onload事件初始化地图对象。
  
 
下面说明了这些步骤。
 

加载Google地图API

 
<script type="text/javascript" src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false">  </script>
      http://ditu.google.cn/maps?file=api&v=2&key=abcdefg网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签,使用注册 API 时收到的密钥。在此示例中,该密钥显示为abcdefg
    请注意,我们也传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置。在此示例中,我们将其设为变量“true_or_false”以强调您必须显式地将此值设置为 true  false
 

地图DOM元素

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

 

Gmap2-基本对象

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

Gmap2类是表示地图的JavaScript类。此类的对象在页面上定义单个地图。(可以创建此类的多个实例,每个对象将在页面上定义一个不同的地图。)
当创建新的地图实例时,在页面中指定一个DOM节点(通常是div元素)作为地图的容器,通过document.getElementById()方法获得该元素的引用。

构造函数
说明
GMap2(container, opts?)
在通常是一个 DIV 元素的指定 HTML container 内创建新地图。您也可以通过 opts 参数传递 GMap2Options 类型的可选参数
请注意因为JavaScript是松散型语言,我们可以不填写构造函数的任何可选参数。
 

初始化地图

map.setCenter(new GLatLng(39.9493116.3975),13);

通过Gmap2构造函数创建地图后,我们需要再做一件事:将其初始化。初始化通过地图的setCenter()方法完成。SetCenter()方法要求有GlatLng坐标和缩放级别,而且必须先发送此方法,然后再在地图上执行其他任何操作,包括设置地图本身的其他任何属性。
 

加载地图

 

<body onload="intialize()" onunload="GUnload()">

GUnload()函数是用来防止内存泄漏的实用工具函数。


经度和纬度

既然已经有地图了,我们还需要一种方法来引用地图上的位置。在Google地图API中,GLatLng对象提供了此类机制。可以构造一个GLatLng对象,按照制图学的惯例{经度,纬度}的顺序传递参数:

var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)
注意:将“地址”转变为地理点的过程称为“地址解析”。
就像它可用于轻松地引用地理点一样,它可用于对象的地理边界。例如,地图在称为视口的窗口内显示整个世界的当前“窗口”。此视口可以通过四个角上的巨型点来定义。GLatLngBounds对象提供了这个功能,通过使用分别表示边界框的西南角和东北角的两个GLatLng对象定义一个矩形区域的实现。 
GLatLng对象在Google地图API中用途广泛。例如,GMarker对象在其构造函数中具有GLatLng,并在地图上的制定地理位置放置标记叠加层
下面的示例使用getBounds()放回当前视口,然后在地图上的这些边界内随机放置10个标记:
 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo2.aspx.cs" Inherits="GoogleMap.Demo2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>  
    <title>Demo2</title>
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&v1=&key=abcdefg"></script>
    <script type="text/javascript">
        function initialize() {
      var map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(39.9493116.3975), 13);
      // Add 10 markers to the map at random locations
      var bounds = map.getBounds();
      var southWest = bounds.getSouthWest();
      var northEast = bounds.getNorthEast();
      var lngSpan = northEast.lng() - southWest.lng();
      var latSpan = northEast.lat() - southWest.lat();
      for (var i = 0; i < 10; i++{
        var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
            southWest.lng() + lngSpan * Math.random());
        map.addOverlay(new GMarker(point));
      }
    }
    </script>
</head>
<body onload="initialize()" onunload="GUnload()">
    <div style="width:500px; height:500px;" id="map_canvas">     
    </div>
</body>
   注意:有关 GMarker 对象的详细信息位于叠加层部分中。

地图属性

默认情况下,在Google地图API中,地图使用标准的“绘制”图块显示。但是,Google地图API也支持其他地图类型。以下是标准地图类型:
G_NORMAL_MAP                   默认视图
G_SATELLITE_MAP               显示Google地球卫星图像
G_HYBRID_MAP                    混合显示普通视图和卫星视图
G_DEFAULT_MAP_TYPES         这三个类型的数组,在需要重复处理的情况下非常有用
 
可以使用GMap2对象的setMapType()方法设置地图类型。例如,下面的代码将地图设置为使用Google地球的卫星视图:
 

var map =new GMap2(document.getElementById("map_canvas"));
map.setMapType(G_SATELLITE_MAP);
 
地图还包含对了解情况非常有用的大量属性。例如,要了解当前视口的尺寸,可使用GMap2对象的getBounds()方法来返回GLatLngBounds值。 
每个地图还包含一个“缩放级别”,用于定义当前视图的分辨率。在普通地图视图内,可以使用0(最低缩放级别,在都吐上可以看到整个世界)到19(最高缩放级别,可以看到独立建筑)之间的缩放级别。缩放级别因所查看地区而异,因为地球上某些地区的数据比其他地区更详细。在卫星视图中可以使用多达20个缩放级别。 
可以通过使用GMap2对象的getZoom()方法检索地图当前使用的缩放级别。
关于缩放级别、地图图块以及创建自己的自定义地图类型的更多信息,请参阅图块叠加层部分。

 
  地图交互

既然现在有了GMap2对象,就可以与之进行交互了。基本地图对象的外观和行为与您在Google地图网站上交互的地图非常相似,并带有大量的内置行为。GMap2对象还提供了大量配置方法来改变地图本身的行为。 
默认情况下,和在 http://ditu.google.cn 上一样,地图对象会对用户的活动做出反应。但您可以使用大量实用工具方法改变此行为。例如,GMap2.disableDragging() 方法禁止了点击并拖拽地图到新位置的功能。
您还可以通过编程与地图交互。GMap2 对象支持可以直接改变地图状态的大量方法。例如,setCenter()panTo  zoomIn() 方法通过编程来操作地图,而不是通过用户交互来操作地图。
下面的示例显示一个地图,等待两秒钟,然后平移到新中心点。panTo 方法将地图中心设置在指定点处。如果指定点位于地图的可见部分,则地图会平稳地平移到该点,否则会跳至该点。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo3.aspx.cs" Inherits="GoogleMap.Demo3" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Demo3</title>
    <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg"></script>
    <script type="text/javascript">
    function initialize(){
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(39.9493116.3975), 19);
        window.setTimeout(function(){
            map.panTo(new GLatLng(39.927116.407));
        },2000);
    }
    </script>
</head>
<body onload = "initialize()" onunload = "GUnload()">
    <div id="map_canvas" style="width:500px; height:500px;">
    </div>
</body>
</html>
 

  信息窗口
所有使用Google 地图API的地图都有可能显示类型为GInfoWindow的单个信息窗口,该窗口上地图上端以浮动窗口显示HTML内容。信息窗口有点像漫画书上的文字气球;它有一个内容区域的锥形引线,引线的头在地图的指定地点上。点击Google地图上的标记可以看到活动的信息窗口。 
GInfoWindow对象没有构造函数。当创建地图时,会自动创建一个信息窗口并将其附加到地图上。对于指定的地图,一次不能显示多个信息窗口,但可以移动信息窗口并可以改变其内容(如果需要)。
GMap2对象提供了openInfoWindow()方法,该方法将一个节点和一个HTML DOM元素作为参数。HTML DOM元素附加到信息窗口容器中,信息窗口的尖端固定在制定点上。
GMap2openInfoWindowHtml()方法相似,但是它使用HTML字符串最为其第二个参数而不是DOM元素。
要创建信息窗口,请调用openInfoWindow方法,并向其传递位置和要显示的DOM元素。下面的示例代码显示了一个信息窗口,该窗口锚定在地图中心,内容为一条简单消息”Hello,  world”

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo4.aspx.cs" Inherits="GoogleMap.Demo4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Demo4</title>
    <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg"></script>
    <script type="text/javascript">
    function initialize(){
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(39.9493116.3975), 13);
        map.openInfoWindow(map.getCenter(),
        document.createTextNode("Hello, world"));
    }
    </script>
</head>
<body onload = "initialize()" onunload = "GUnload()">
    <div id="map_canvas" style="width:500px; height:500px;">   
    </div>
</body>
</html>
 
效果如图: 

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏