使用Google Maps API

谁会想到微软可以再次设计一些重新引发网络开发兴趣的东西,并开启了全新的Web 2.0网站浪潮? AJAX代表异步JavaScript和XML,是一种技术(而不是技术),它与在场景后工作的服务器交换少量数据。基本上,这意味着不需要重新加载网页来接收新数据。 AJAX在很大程度上依赖于XMLHttpRequest对象,最初是一个Microsoft ActiveX对象,用于在客户端和服务器端之间建立连接。

尽管自互联网热潮以来XMLHttpRequest对象已经存在,但随着Web 2.0运动的爆发,它的受欢迎程度最近才有所提升。 AJAX现在是Web 2.0的代名词,任何新的Web 2.0站点几乎都应该有某种AJAX。先行者,这些新方法的流行,飙升,包括Google SuggestWritely的Flickr的,但可能是Web 2.0运动中最值得注意的是Google Maps API

凭借其拖动界面和弹出气泡。这是一种全新的方式,不仅可以与地图进行交互,还可以与网页进行交互。借助Google地图的API,您可以在自己的网站上获得映射界面的强大功能。许多人已经使用它来创建mashup站点,这些站点组合了来自各种来源的数据并将其形成一种新的查看数据的方式。例如,HousingMaps.com将Craigslist的房源列表放在Google地图上,而Chicagocrime.org让您查看芝加哥的犯罪地点地图。

制作你的地图

您需要做的第一件事就是注册Google Maps API密钥。没有它,您就无法使用Google的API。去谷歌并按照说明操作 - 它们非常简单,注册密钥不应超过一两分钟。

您现在可以轻松设置一个700像素宽,500像素高的简单地图。确保它是一个HTML文件并将其命名为index.html:

谷歌地图
加载地图

现在创建一个名为map.js的JavaScript文件:

function load(){var map = document.getElementById(“map”); if(GBrowserIsCompatible()){var gmap = new GMap2(map); gmap.addControl(new GSmallMapControl()); gmap.addControl(new GMapTypeControl( )); gmap.addControl(new GOverviewMapControl(new GSize(100,100))); gmap.setCenter(new GLatLng(54.7,-4),5);} else {alert(“抱歉,你的浏览器无法处理真正的力量Google Maps“);}} window.onload = load; window.onunload = GUnload;

JavaScript会在HTML(第二行)中找到ID为“map”的标记,如果浏览器可以处理Google地图(第三行),则会在HTML(第四行)中标记为map的标记内放置一个新地图。然后,您可以向地图添加一些控件,即左上角的控制箭头(第5行),右上角的地图类型选择器(第6行)和右下角的100 x 100像素地图概览(行七)。然后将地图的中心设置为纬度54.7度和经度-4度(这是在坎布里亚附近海域的某个地方),放大五(第八行),你会得到一张漂亮的英国地图。

Google Maps API: Basic UK map

显然,没有任何内容的英国地图对普通游客来说有点无聊。把东西放在地图上是个不错的主意,但你也需要一些信息。具有结构的信息也会很好。大多数人在谈论有结构的信息时会立即想到XML,但是因为你正在使用JavaScript,你可以使用不同的技术。

介绍JSON

JSON(发音为'Jason')代表JavaScript Object Notation,是一种轻量级数据格式,类似于XML。在JavaScript中使用JSON时优于XML的优点是它很容易解析和遍历。以下面的XML文档为例:

 rik@test.com 

您可以拥有类似的JSON文件,例如:

{“root”:{“email”:{“type”:“work”,“value”:“rik@test.com”}}}

在JavaScript中,要获取'value'值(在本例中为rik@test.com),您只需键入'root.email.value',这比遍历XML树更容易,尤其是在信息时你想放在你的网站上开始变得更复杂。此外,它不仅仅是可以使用JSON的字符串,它可以是数组,函数 - 基本上任何JavaScript,因此它非常有用。事实上,像谷歌和雅虎这样的公司!现在正在使用JSON并为其API提供JSON输出。如果它对谷歌来说足够好,那对我们来说已经足够了!

显然,你需要在地图上找到一些信息,所以让我们制作一个包含一些数据的JSON文件。我打算制作一张显示周末足球比赛的地图,为了给参观者增加一些兴趣,我将提供一些关于比赛的可爱的足球相关细节。现在让我们创建一个名为points.json的JSON文件:

{“标记”:[{“点”:新GLatLng(53.478093,-2.116116),“homeTeam”:“曼联”,“客队”:“阿森纳”,“信息”:“Fusce adipiscing.Pellentesque semper risus eget eros 。“,”fixture“:”星期日下午4点“,”容量“:”67,000“,”previousScore“:”2-1“},{”点“:新GLatLng(51.534229,-0.111312),”homeTeam“:”纽卡斯尔“,”客队“:”切尔西“,”信息“:”Morbi at sapien.Quisque vitae eros nec orci elementumbibendum。“,”灯具“:”周六下午3点“,”容量“:”45,000“,”电视“: “眼睛电视”}]}

接下来的任务是根据名为markers的数组中每个标记的点值在地图上放置一些标记,并且可能有一个包含一些细节的信息窗口。为了实现这一点,您需要为map.js添加一些函数:

function createMarker(input){var marker = new GMarker(input.point); GEvent.addListener(marker,“click”,function(){marker.openInfoWindowHtml(input.homeTeam +“vs.”+ input.awayTeam);} ); return marker;} function parseJson(doc){var jsonData = eval(“(”+ doc +“)”); for(var i = 0; i <jsonData.markers.length; i ++){var marker = createMarker (jsonData.markers [i]); gmap.addOverlay(marker);}} GDownloadUrl(“points.json”,function(data,responseCode){parseJson(data);});

我将从下到上解释这段代码发生了什么。 GDownloadUrl是Google Maps的API的一部分,它使用AJAX获取points.json文件的内容,并将结果传递给parseJson函数。 parseJson函数获取结果,并使用eval函数将它们从一个长数据字符串转换为对象嵌套。现在可以轻松遍历JSON文件。然后,您可以在JSON文件中循环遍历数组,将每个单独的对象发送到createMarker函数。 createMarker函数根据点值在地图上放置一个标记,并在单击时打开一个信息窗口,其中包含主队名称与客队名称。函数返回后,使用API函数addOverlay将标记添加到地图中。

Google Maps API: Initial text bubble

格式化气泡

正如您所看到的,Google Maps的API为您完成了大量艰苦的工作,使其易于使用。唯一的问题是泡泡目前看起来有点无聊。您可以通过向map.js文件添加另一个函数来使它们更有趣,以便格式化bubble中的文本:

function formatWindow(input){var html =“ 
“; html + =”

“+ input.homeTeam +”与“+ input.awayTeam +”

“; html + =”

“+ input.information +”

“; html + =”

“if(input.fixture!= null){html + =” Kick-off: “+ input.fixture +”
“;} / *更多格式化* / html + =”

“;返回html;}

此函数接收一个由JSON文件构成的对象,并返回一个字符串以进入气泡。现在剩下的就是调用函数,因此您需要更改createMarker函数中的行:

marker.openInfoWindowHtml(input.homeTeam +“vs.”+ input.awayTeam);

至:

marker.openInfoWindowHtml(formatWindow(input));

这将调用该函数以接收要在气泡中显示的HTML字符串,显示您希望访问者看到的文本。

Google Maps API: Styled text bubble

如果你想知道为什么你自己的气泡可能看起来不像图像,那是因为我在我的HTML文档中添加了一些CSS样式。 Google地图中的气泡可以采用与任何HTML相同的格式进行格式化。如果你查看我的formatWindow函数,你可以看到我在一个带有类名'bubble'的div标签中将HTML包装在bubble中。这意味着在我的CSS中,我可以添加规则来格式化bubble的内容:

.bubble {width:350px;}。bubble h1 {margin:0; padding:0; font-size:150%;}

标签式泡泡

信息越多,您需要的气泡越多,以及在狭小空间内显示大量信息的方式。幸运的是,第二版Google Maps的API提供了标签式窗口,而且它们很容易编码。您只需要更改createMarker函数以接受一系列选项卡:

function createMarker(input){var marker = new GMarker(input.point); var tabs_array = [new GInfoWindowTab(“Tab1”,“Tab 1 Information”),new GInfoWindowTab(“Tab2”,“Tab 2 Information”)]; GEvent.addListener(marker,“click”,function(){marker.openInfoWindowTabsHtml(tabs_array);}); return marker;}

此函数创建一个新的标记点和一个新的GInfoWindowTab对象数组,它带有两个参数 - 选项卡标题和选项卡内容。然后,此数组将传递给“openInfoWindowTabsHtml”方法,该方法会创建一个带有标签的气泡,这些标签在单击标记时会显示。

Google Maps API: Multiple bubbles

显然,使用“Tab 2信息”的标签并不是很令人兴奋,因此请尝试对其进行格式化。您还可以添加两个(或更多,由您自己决定)称为formatTabOne和formatTabTwo的函数(类似于formatWindow函数)来格式化每个单独的选项卡。

改变你的图标

它现在看起来很棒,但还有更多工作要做。默认标记不是最有吸引力的,所以请自己替换它们。 PNG通常会为Google地图提供最佳效果,我建议您将标记保存为一个。您可以将另一个函数添加到名为makeIcon的map.js文件中:

function makeIcon(image){var icon = new GIcon(); icon.image = image; icon.shadow =“images / shadow.png”; icon.iconSize = new GSize(16,16); icon.shadowSize = new GSize (24,16); icon.iconAnchor = new GPoint(8,16); icon.infoShadowAnchor = new GPoint(0,0); icon.infoWindowAnchor = new GPoint(8,1); return icon;}

此函数创建一个名为“icon”的新变量,它是一个GIcon,是Google Maps API的一部分。然后,您可以指定图标的外观。接下来,将前景图标图像作为函数的参数并设置其前景大小(第四行)及其阴影大小(第五行),并为图标添加锚点,这些锚点都位于前景的左上角图标。 iconAnchor(第六行)是前景的底部位于地图上的位置,infoShadowAnchor(第七行)是阴影左上角相对于前景的位置,而infoWindowAnchor(第八行)将气泡固定在前景图像上。然后该函数返回该对象。

让我们在JSON文件中添加一些行,让每个标记知道它想要前景图标图像的图像:

“markerImage”:“images / red.png”

这只是图像与HTML文件相关的路径。现在你必须在某处调用函数,所以让我们改变早期createMarker函数中的行:

var marker = new GMarker(input.point);

至:

var marker = new GMarker(input.point,makeIcon(input.markerImage));

您现在应该获得一个带有一些自定义标记的地图。因为这是一张足球地图,有什么比一些足球衫更好用?

要完成它,请在JSON文件中添加更多匹配项,因为通常在周末播放两场以上的比赛。现在你应该有一个完整的地图。

谷歌提供好文档在其网站上,如果您想进一步拍摄地图,这将非常有用。查看已基于Google Maps API的众多服务中的一些,以获得更多灵感。幸运的是,Google在您的项目中使用其地图付出了所有艰苦的努力 - 其强大的API提供了简单编码和快速结果所需的所有钩子。



翻译字数超限