利用GooglemapAPI建站之基础篇——地理位置标记与信息提示

2012-10-29

利用Google地图API建站之基础篇——地理位置标记与信息提示在Google地图资源充分开放的背景下，如果还在用图

利用Google地图API建站之基础篇——地理位置标记与信息提示

在Google地图资源充分开放的背景下，如果还在用图片去标记用户网站的地理信息，多少显得有那么一点OUT。这篇文章将通过一个简单的示例，说明Google地图API在网站建设中的简单应用。

????? 本文不会讨论Google API的专业编程，毕竟对于大部分网站应用而言，地图的使用是有限的，如果以后有机会，我会跟大家深入探讨Google API的功能，本文仅通过一个简单的示例实现如下功能：

让目标地点显示在地图中央；在地图上为目标地点做标记；在地图上为目标地点显示信息提示窗口。

显示效果如下图所示：

利用GooglemapAPI建站之基础篇——地理位置标记与信息提示

示例演示以及下载地址：http://www.sellsoft.cn/map.html

需要提供的两组输入参数：

注册一个 Google 地图 API 密钥，目前Google地图API为每个网站生成一个API密钥，通过这个网址（http://code.google.com/intl/zh-CN/apis/maps/signup.html）注册你的网站，会自动生成一组密钥。获取要标记目标地点的经度以及纬度，例如(41.806765275061416, 123.43425035476684)

准备好这两组参数后，在下面所示的代码中分别替换掉API密钥，目标地点的经纬度，以及信息提示的内容后，就可以迅速拥有属于自己的在线地图标记了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
??? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
? <head>
??? <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
??? <title>谷歌MapAPI</title>
??? <script src="http://maps.google.com/maps?file=api&;v=2&key=ABQIAAAADtCnUjqmrRdMR6pMNWM0MhTWjhv1emnWXsZWGY4FQtuZL_QUsRS6BotQo7EfcP7D6dTPipFDCTuXXA"
??????????? type="text/javascript"></script>
??? <script type="text/javascript">
??? function initialize() {
????? if (GBrowserIsCompatible()) {
??????? var map = new GMap2(document.getElementById("map_canvas"));
??????? map.setCenter(new GLatLng(41.806765275061416, 123.43425035476684), 13);
????????? var latlng = new GLatLng(41.806765275061416, 123.43425035476684);
????????? map.addOverlay(new GMarker(latlng));
????????? map.openInfoWindow(map.getCenter(),
?????????????????? document.createTextNode("沈阳网站建设, www.sellsoft.cn"));
????? }
??? }
??? </script>
? </head>
? <body onload="initialize()" onunload="GUnload()">
??? <div id="map_canvas" style="width: 500px; height: 300px"></div>
? </body>
</html>

???? 或许会有人问，如何获得当前地理信息的经度和纬度，在这里我可以提供给大家一个比较简便的方式，首先使用谷歌地图找到你要标记的目标地点，并将其显示于地图窗口的中央，然后在当前窗口的浏览器地址栏中输入：javascript:void(prompt(”,gApplication.getMap().getCenter()));回车运行这段代码，会弹出当前位置经度和纬度的准确数值。如下图所示：

利用GooglemapAPI建站之基础篇——地理位置标记与信息提示

????? 本文仅仅是Google地图API最简单的应用，大家可以在此基础上扩展功能，比如：在地图中添加多个标记或为不同标记显示不同风格等。

热点排行

Web前端

利用GooglemapAPI建站之基础篇——地理位置标记与信息提示