Google地图 API 1 、 什么是 Google地图 API Google地图 API是一种通过 JavaScript将 Google地图嵌入到您的网页的 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&v=2&key=abcdefg&sensor=true_or_false" ="text/javascript" > script > < script type ="text/javascript" > function intialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById( " map_canvas " )); new GLatLng( 39.9493 , 116.3975 ), 13 ); script > head > < body onload ="intialize()" onunload ="GUnload()" > < div id ="map_canvas" style ="width: 500px; height: 500px;" >div > body > html > 即使在此简单的示例中，也需要注意五点： 下面说明了这些步骤。 加载 Google 地图 API < script type = " text/javascript " = " http://ditu.google.cn/maps?file=api&v=2&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.9493 , 116.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 " )); new GLatLng( 39.9493 , 116.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(), + lngSpan * Math.random()); 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 也支持其他地图类型。以下是标准地图类型： l G_NORMAL_MAP 默认视图 l G_SATELLITE_MAP 显示 Google 地球卫星图像 l G_HYBRID_MAP 混合显示普通视图和卫星视图 l G_DEFAULT_MAP_TYPES 这三个类型的数组，在需要重复处理的情况下非常有用 可以使用 GMap2 对象的 setMapType() 方法设置地图类型。例如，下面的代码将地图设置为使用 Google 地球的卫星视图： var map = new GMap2(document.getElementById( " map_canvas " )); 地图还包含对了解情况非常有用的大量属性。例如，要了解当前视口的尺寸，可使用 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&v=2&key=abcdefg" >script > < script type ="text/javascript" > function initialize() { var map = new GMap2(document.getElementById( " map_canvas " )); new GLatLng( 39.9493 , 116.3975 ), 19 ); function () { new GLatLng( 39.927 , 116.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 元素附加到信息窗口容器中，信息窗口的尖端固定在制定点上。 GMap2 的 openInfoWindowHtml() 方法相似，但是它使用 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&v=2&key=abcdefg" >script > < script type ="text/javascript" > function initialize() { var map = new GMap2(document.getElementById( " map_canvas " )); new GLatLng( 39.9493 , 116.3975 ), 13 ); " Hello, world " )); script > head > < body onload = "initialize()" onunload = "GUnload()" > < div id ="map_canvas" style ="width:500px; height:500px;" > div > body > html > 效果如图：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】 进行投诉反馈！
< script type = " text/javascript " 