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

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

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

  1. 让目标地点显示在地图中央;
  2. 在地图上为目标地点做标记;
  3. 在地图上为目标地点显示信息提示窗口。

显示效果如下图所示:

image

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

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

  1. 注册一个 Google 地图 API 密钥,目前Google地图API为每个网站生成一个API密钥,通过这个网址(http://code.google.com/intl/zh-CN/apis/maps/signup.html)注册你的网站,会自动生成一组密钥。
  2. 获取要标记目标地点的经度以及纬度,例如(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()));回车运行这段代码,会弹出当前位置经度和纬度的准确数值。如下图所示:

image

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

评论已关闭。