Google Maps API用法教程

在过去的一年中，在线地图的发展是相当巨大，我们可以看到在线地图的极有价值的信息和其能力。这其中，最有名气的自然是Google Maps。. Google Maps由一个相当强大的开发引擎并也有一个很大的社区提示支持。Google 允许各种web masters 通过Google Maps API来增加或自定义他们站点特定的地图，你可能从这里取得Google API key 。一个地图 AP

caocao024

413人浏览 · 2010-04-10 23:45:00

caocao024 · 2010-04-10 23:45:00 发布

在过去的一年中，在线地图的发展是相当巨大，我们可以看到在线地图的极有价值的信息和其能力。这其中，最有名气的自然是Google Maps。. Google Maps由一个相当强大的开发引擎并也有一个很大的社区提示支持。

Google 允许各种web masters 通过Google Maps API来增加或自定义他们站点特定的地图，你可能从这里取得Google API key 。一个地图 API key只对一个“目录”或域有效。key绑定了你的域名，你要在网站上放地图，需要有对应的key，否则拒绝读取地图数据，在本地测试可以不用key。当然，你可以申请多个API key。

创建一个简单的地图

在你的站点上引入Google Maps 是一件很简单的事情，你只需要加入：

引入Google的JavaScript 文件
设置JavaScript 一些参数
一个你需要显示地图的HTML layer

Google的Javascript文件引入:

 
   1<script
 
   2    charset="UTF-8"
 
   3    src=http://maps.google.com/maps?file=api&v=2&hl=en&oe=utf-8&key=API_KEY
 
   4    type="text/javascript">
 
   5</script>

注意： 我们可以改变语言，比如说，把“hl=en” 改成中文“hl=zh-CN” 。我们还得要把“API_KEY” 改成我们向Google申请来的那个。

说明: 使用 UTF-8 编码会更好些。

设置地图参数:

这是你可定制有个性化的Google Maps的地方。我们可以增加一些参数来改变地图的样式。例如，我们可以设置地图的载入和显示的坐标。下面是相关的代码：

 
   1]function initialize() {
 
   2    if (GBrowserIsCompatible()) {
 
   3        var map = new GMap2(document.getElementById("map_canvas"));
 
   4        map.setCenter(new GLatLng(37.97918, 23.71665), 13);
 
   5        map.setUIToDefault();
 
   6    }
 
   7}

请注意上面高亮的那一条语句，第一个是纬度坐标和第二个是经度坐标，“13” 表示地图缩放的程度，这个值可以取1 到17。

要知道所在地点的纬度和经度，你可以使用这个工具，这个工具很容易使用，只需要把地图移到你想要的区域，然后，把鼠标放在中心就可以了。

地图标记

你可以在地图上放上一个标记来标出一个特定的位置，下面是一个示例代码。

 
   1var point = new GLatLng(37.97110, 23.72601);
 
   2map.addOverlay(new GMarker(point));

于是，我们整个代码看起来是下面这个样子：

 
   1function initialize() {
 
   2    if (GBrowserIsCompatible()) {
 
   3        var map = new GMap2(document.getElementById("map_canvas"));
 
   4        map.setCenter(new GLatLng(37.97918, 23.71665), 13);
 
   5        var point = new GLatLng(37.97110, 23.72601);
 
   6        map.addOverlay(new GMarker(point));
 
   7        map.setUIToDefault();
 
   8    }
 
   9}

上面的示例把我们的地图的中心放在了希腊雅典，标记了雅典卫城。

气球提示

气球提示一个很不错的界面，他可以用于放置一些小提示或或是一些信息。例如，下面的代码将放置一个在雅典卫城山上放一个气球提示来显示一些信息：

 
   01function initialize() {
 
   02    if (GBrowserIsCompatible()) {
 
   03        var map = new GMap2(document.getElementById("map_canvas"));
 
   04        map.setCenter(new GLatLng(37.97110, 23.72601), 13);
 
   05        var html = "Parthenon 帕台农神庙, 地址: Acropolis Hill";
 
   06        map.openInfoWindow(map.getCenter(),
 
   07        document.createTextNode(html));
 
   08        map.setUIToDefault();
 
   09    }
 
   10}

活动标记

我们可以合并一些标记和气球提示来创建一个活动标记，这样一来，我们可以达到这样的效果——当用户点击某个标记的时候才会显示提示。代码如下所示：

 
   01function initialize() {
 
   02    if (GBrowserIsCompatible()) {
 
   03        var map = new GMap2(document.getElementById("map_canvas"));
 
   04        map.setCenter(new GLatLng(37.97918, 23.71665), 13);
 
   05        var baseIcon = new GIcon(G_DEFAULT_ICON);
 
   06        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
 
   07        baseIcon.iconSize = new GSize(20, 34);
 
   08        baseIcon.shadowSize = new GSize(37, 34);
 
   09        baseIcon.iconAnchor = new GPoint(9, 34);
 
   10        baseIcon.infoWindowAnchor = new GPoint(9, 2);
 
   11 
 
   12        function createMarker(point, index) {
 
   13            var redIcon = new GIcon(baseIcon);
 
   14            redIcon.image = "http://www.google.com/mapfiles/marker.png";
 
   15            markerOptions = { icon:redIcon };
 
   16            var marker = new GMarker(point, markerOptions);
 
   17            GEvent.addListener(marker, "click", function() {
 
   18                marker.openInfoWindowHtml("Parthenon, Address: Acropolis Hill");
 
   19            });
 
   20            return marker;
 
   21        }
 
   22 
 
   23        var latlng = new GLatLng(37.97110, 23.72601);
 
   24        map.addOverlay(createMarker(latlng));
 
   25    }
 
   26}

让我来梳理一下上面的代码。下面的部分是在标记下增加一个阴影：

 
   1var baseIcon = new GIcon(G_DEFAULT_ICON);
 
   2baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
 
   3baseIcon.iconSize = new GSize(20, 34);
 
   4baseIcon.shadowSize = new GSize(37, 34);
 
   5baseIcon.iconAnchor = new GPoint(9, 34);
 
   6baseIcon.infoWindowAnchor = new GPoint(9, 2);

标记的Action是在这里设置的：

 
   01function createMarker(point, index) {
 
   02    var redIcon = new GIcon(baseIcon);
 
   03    redIcon.image = "http://www.google.com/mapfiles/marker.png";
 
   04    markerOptions = { icon:redIcon };
 
   05    var marker = new GMarker(point, markerOptions);
 
   06    GEvent.addListener(marker, "click", function() {
 
   07        marker.openInfoWindowHtml("Parthenon, Address: Acropolis Hill");
 
   08    });
 
   09    return marker;
 
   10}

这里是我们的标记的坐标：

 
   1var latlng = new GLatLng(37.97110, 23.72601);
 
   2map.addOverlay(createMarker(latlng));

载入地图

我们可以通过两种方法载入地图。我们可以让地图在整网页载入时载入（通过使用body的load事件），也可以把载入过程赋给其它事件。下面的两个方法是我们需要注意的：

initialize() 载入地图
GUnload() 卸载地图以释放内存

我们当然还需要使用HTML的DIV标签来指定一个ID，这样才能被JavaScript使用，在我们的示例中，我们使用“map_canvas”。我们也能使用CSS来渲染这个DIV层。

定制地图

你可以使用自定义的标记和阴影。有两个工具可以帮助你创建这些图标—— 地图标记和阴影。你也可以使用HTML和CSS来定义气球提示。

加入多个标记并分组

我们可以标记多个地点，并可以把它们根据我们的需要分组。这样一来，我们可以通过不同的标记图标来显示地点的不同属性，比如：酒店，车站等。要做到这样，我们只需要使用一个XML文件，一个简单的XML文件如下所示：

 
   01<markers>
 
   02<marker
 
   03    name="标题"
 
   04    label="这是一个标签"
 
   05    desc="气球提示的描述"
 
   06    lat="37.97167" lng="23.72581"
 
   07    type="标签的种类，如 Bridge"
 
   08    address="地址信息"
 
   09    icona="图标"
 
   10/>
 
   11</markers>

你可以在这个XML文件中加入多个地点信息。有一件事你需要小心的是，当出现一一些特定字符时（比如单引号，双引号，“#@$<>”等），你需要使用HTML的转义。

使用这XML的脚本如下：

`1`	`<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/src/labeledmarker.js"type="text/javascript"></script>`

当然，你需要设置一些参数：

 
   01var iconRed = new GIcon();
 
   02iconRed.image = '../img/marker-red.png';
 
   03iconRed.shadow = '';
 
   04iconRed.iconSize = new GSize(32, 32);
 
   05iconRed.shadowSize = new GSize(22, 20);
 
   06iconRed.iconAnchor = new GPoint(16, 16);
 
   07iconRed.infoWindowAnchor = new GPoint(5, 1);
 
   08var customIcons = [];
 
   09 
 
   10customIcons["ancient"] = iconRed;
 
   11var markerGroups = { "ancient": []};

上面，我们给customIcons 的“ancient”属性设置成了iconRed ，于是我们应该在我们的XML文件中使用类型(ancient) ，如果我们把这个XML文件命名为： markers.xml，那么，我们的代码如下：

 
   01GDownloadUrl("markers.xml", function(data) { //We tell Google Maps to load our file
 
   02        var xml = GXml.parse(data);
 
   03        var markers = xml.documentElement.getElementsByTagName("marker");//and read markers
 
   04        for (var i = 0; i < markers.length; i++) {
 
   05            var name = markers[i].getAttribute("name"); //From here down we assign variables.
 
   06            var label = markers[i].getAttribute("label");
 
   07            var desc = markers[i].getAttribute("desc");
 
   08            var address = markers[i].getAttribute("address");
 
   09            var type = markers[i].getAttribute("type");
 
   10            var icona = markers[i].getAttribute("icona");
 
   11            var point = newGlatLng(parseFloat(markers[i].getAttribute("lat")), //and we set the lat-long
 
   12            parseFloat(markers[i].getAttribute("lng")));
 
   13            var marker = createMarker(point, name, label, desc, address, type, icona);
 
   14            map.addOverlay(marker);
 
   15        }
 
   16    });
 
   17}
 
   18}
 
   19 
 
   20function createMarker(point, name, label, desc, address, type, icona) {
 
   21    var marker = new LabeledMarker(point, {icon: customIcons[type], labelText: label, labelOffset: new GSize(-6, -8)})
 
   22};

要分组标记，你需要下面的代码：

 
   1    markerGroups[type].push(marker);
 
   2    var html = "<img src=" + icona + " height=150 border=0 /><br><br><span><b>"+ name + "</b><br/>" +
 
   3            desc + "<br/><b>Address:</b> " + address + "<br/><br/><span>";
 
   4    GEvent.addListener(marker, 'click', function() {
 
   5        marker.openInfoWindowHtml(html);
 
   6    });
 
   7    return marker;
 
   8}

要使用不同的图标，你可以使用相同的方法。

 
   01var iconRed = new GIcon();
 
   02iconRed.image = '../img/marker-red.png';
 
   03iconRed.shadow = '';
 
   04iconRed.iconSize = new GSize(32, 32);
 
   05iconRed.shadowSize = new GSize(22, 20);
 
   06iconRed.iconAnchor = new GPoint(16, 16);
 
   07iconRed.infoWindowAnchor = new GPoint(5, 1);
 
   08 
 
   09var iconGreen = new GIcon();
 
   10iconGreen.image = '../img/marker-green.png';
 
   11iconGreen.shadow = '';
 
   12iconGreen.iconSize = new GSize(32, 32);
 
   13iconGreen.shadowSize = new GSize(22, 20);
 
   14iconGreen.iconAnchor = new GPoint(16, 16);
 
   15iconGreen.infoWindowAnchor = new GPoint(5, 1);
 
   16 
 
   17var iconBrown = new GIcon();
 
   18iconBrown.image = '../img/marker-brown.png';
 
   19iconBrown.shadow = '';
 
   20iconBrown.iconSize = new GSize(32, 32);
 
   21iconBrown.shadowSize = new GSize(22, 20);
 
   22iconBrown.iconAnchor = new GPoint(16, 16);
 
   23iconBrown.infoWindowAnchor = new GPoint(5, 1);
 
   24 
 
   25var customIcons = [];
 
   26 
 
   27customIcons["hotel"] = iconRed;
 
   28customIcons["bridge"] = iconGreen;
 
   29customIcons["hill"] = iconBrown;
 
   30var markerGroups = { "hotel": [], "bridge": [], "hill": []};

所以，如果我们在XML 文件中设置了不同的种类，如：hotel，bridge 和 hill，我们也应该需要不同的颜色和图标。

过滤显示标记

我们还可以让我们的标记更友好一些。我们可以让用户决定是否显示标记，这样的话，地图上的标记就不会太多，也会根据用户的需求来显示相当的标记。我们可以使用几个按钮，复选框，或是链接来完成这个事情。要做到这个事，你需要在“map.addMapType(G_SATELLITE_3D_MAP); ”后面加入下面的代码：

 
   1document.getElementById("hotelCheckbox").checked = true;
 
   2document.getElementById("bridgeCheckbox").checked = true;
 
   3document.getElementById("hillCheckbox").checked = true;
 
   4document.getElementById("labelsCheckbox").checked = true;

然后再加入下面的这些 JavaScript 的代码：

 
   01function toggleGroup(type) {
 
   02    for (var i = 0; i < markerGroups[type].length; i++) {
 
   03        var marker = markerGroups[type][i];
 
   04        if (marker.isHidden()) {
 
   05            marker.show();
 
   06        } else {
 
   07            marker.hide();
 
   08        }
 
   09    }
 
   10}
 
   11 
 
   12function toggleLabels() {
 
   13    var showLabels = document.getElementById("labelsCheckbox").checked;
 
   14    for (groupName in markerGroups) {
 
   15        for (var i = 0; i < markerGroups[groupName].length; i++) {
 
   16            var marker = markerGroups[groupName][i];
 
   17            marker.setLabelVisibility(showLabels);
 
   18        }
 
   19    }
 
   20}
 
   21 
 
   22function hideAll() {
 
   23    var boxes = document.getElementsByName("mark");
 
   24    for(var i = 0; i < boxes.length; i++) {
 
   25        if(boxes[i].checked) {
 
   26            boxes[i].checked = false;
 
   27            switchLayer(false, layers[i].obj);
 
   28            chosen.push(i);
 
   29        }
 
   30    }
 
   31}
 
   32 
 
   33function checkChecked() {
 
   34    var boxes = document.getElementsByName("mark");
 
   35    for(var i = 0; i < boxes.length; i++) {
 
   36        if(boxes[i].checked) return true;
 
   37    }
 
   38    return false;
 
   39}

最后一件事是加如几个checkbox ：

 
   1<input type="hidden" id="labelsCheckbox" onclick="toggleLabels()"checked=”checked” />
 
   2<label for=”hotelCheckbox”>Hotels</label><input type="checkbox"id="hotelCheckbox" onclick="toggleGroup('hotel')" checked=”checked” />
 
   3<label for=”bridgeCheckbox”>Bridges</label><input type="checkbox"id="bridgeCheckbox" onclick="toggleGroup('bridge')" checked=”checked” />

我们 Google Maps 就绪了，这篇文章讲述了Google Map API中你应该知道的。希望这篇文章对你有帮助。

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

Spring面试题整理

Spring 概述1. 什么是spring?spring 是个Java企业级应用的开源开发框架。Spring主要用来开发Java应用，但是有些扩展是针对构建J2EE平台的web应用。Spring 框架目标是简化Java企业级应用开发，并通过POJO为基础的编程模型促进良好的编程习惯。2. 使用Spring框架的好处是什么？轻量：Spring 是轻量的，基本的版本大约2MB。控制反转：Spring通

开放原子开发者工作坊

Macaca自动化测试框架

介绍Macaca是一套完整的自动化测试解决方案，基于node.js开发。由阿里巴巴公司开源：地址：https://github.com/macacajs/特点：同时支持PC端和移动端（Android、iOS）自动化测试。支持JavaScript（Node.js）、Java、Python。前置准备安装JavaJava下载地址：(http