google maps api for china6 google confidential google maps api • 基本功能及使用 –...

Google Maps API for ChinaXinghua AnMay 31, 2007

3 Google Confidential

Google Maps API出现之前…


Google Maps API发布之后…


什么是Google Maps API？

• 对web开发者来说，是一个Javascript类库。它可以：

– 在用户自己的网页中嵌入Google Maps

– 将自己网页的内容与Google Maps融合呈现

– 是一个开放系统：对Google Maps自身进行二次开发

• 使用和开发绝大多数情况下完全免费！

• 1 + 1 = 2.537…


Google Maps API

• 基本功能及使用

– 目前版本：GMap2– HelloWorld程序，Maps控件，事件处理，信息窗口，层，点、折线以及多

边型等

• 高级功能简介

– 异步HTTP通讯：GXmlHttp, GDownloadUrl– 创建自己的控件：控件子类化

– 地址定位

• 最新功能

– KML与GeoRSS支持

– 地图标注管理器：MarkerManager– 我的地图：MyMaps


Google Maps API


Maps API基本功能 – 从HelloWorld程序开始

<script src=“http://ditu.google.com/maps?file=api&v=2&key=ReplaceYourGoogleMapKeyHere” type="text/javascript"></script><script type="text/javascript">var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(37, 107), 4);

</script>

• 在网页中创建Google地图对象

http://ditu.google.com/maps?file=api&v=2&key=ReplaceYourGoogleMapKeyHere




Maps API基本功能 – 从HelloWorld程序开始

• 以上代码在网页指定的<div>元素中创建一个Google地图对象，并将视野设置成全国范围


Maps API基本功能 – 添加控件(Controls)

var map = new GMap2(document.getElementById("map"));map.addControl(new GSmallMapControl());map.setCenter(new GLatLng(37, 107), 4);

• 以下代码在地图中添加视野缩放的控件


Maps API基本功能 – 信息窗口(InfoWindows)

var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(37, 107), 4);map.openInfoWindow(map.getCenter(), document.createTextNode(“Hello, World”));

• 以下代码在地图中弹出一个信息窗口


Maps API基本功能 – 图层(Overlays)

var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(37, 107), 4);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(), southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point));

}

• 创建标注(GMarkers)



…var points = [];for (var i = 0; i < 5; i++) {points.push(new GLatLng(southWest.lat() + latSpan *

Math.random(),southWest.lng() + lngSpan * Math.random()));}map.addOverlay(new GPolyline(points));

• 创建多点折线(GPolylines)



• 以上代码在地图视野范围内随机创建10个标注和一条折线



…var icon = new GIcon();icon.image = "http://myhost/images/mm_20_purple.png";icon.shadow = "http://myhost/images/mm_20_shadow.png";icon.iconSize = new GSize(12, 20);icon.shadowSize = new GSize(22, 20);icon.iconAnchor = new GPoint(6, 20);icon.infoWindowAnchor = new GPoint(5, 1);

for (var i = 0; i < 10; i++) {var point = new GLatLng(randLat(), randLong());map.addOverlay(new GMarker(point, icon));

}

• 创建自定义图标(GIcon)



• 以上代码在地图上创建10个自定义带阴影的图标


Maps API基本功能 – 多页标信息窗口(GInfoWindowTab)

var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(37.442, -122.142), 13);// 创建两个包含不同内容的页标var infoTabs = [new GInfoWindowTab(“公司名称”, “Google中国"),new GInfoWindowTab(“详细信息”, “地址：北京清华科技园科建大厦")

];var marker = new GMarker(map.getCenter());GEvent.addListener(marker, "click", function() {marker.openInfoWindowTabsHtml(infoTabs);

});map.addOverlay(marker);marker.openInfoWindowTabsHtml(infoTabs);

• 以下代码在地图中创建一个包含两个页标的信息窗口，每个页标显示不同的内容


Maps API基本功能 – 多页标信息窗口(GInfoWindowTab)


Maps API基本功能 – 捕获及处理事件

addMaptype,removemaptype,click, movestart, move, moveend, zoomend, maptypechanged, infowindowopen, infowindowclose, addoverlay, removeoverlay, clearoverlay, clearoverlays, mouseover, mouseout, mousemove, dragstart, drag, dragend, load

• 支持多种事件的捕获



…GEvent.addListener(map, "click", function(marker, point) {if (marker) {

map.removeOverlay(marker);} else {

map.addOverlay(new GMarker(point)); }});

• 响应用户鼠标点击代码示例

当地图被点击时,在当前鼠标位置创建一个标注；再次点击此处将取消该标注



…GEvent.addListener(map, "moveend", function() {var center = map.getCenter();document.getElementById("message").innerHTML = “当前地图中心点：" + center.toString();

});

• 响应地图移动事件代码示例



• 当地图被拖动后,更新显示当前地图中心点


Maps API高级功能 – XML RPC

• 基于XML的异步HTTP通讯

– GXmlHttp• 对XmlHttpRequest的封装

– GDownloadUrl• 调用更简单

• 自动检查onreadystatechange



// <markers>// <marker lat="39.441" lng=“116.141"/>// <marker lat="39.322" lng=“116.213"/>// </markers>GDownloadUrl("data.xml", function(data, responseCode) {var xml = GXml.parse(data);var markers =xml.documentElement.getElementsByTagName("marker");for (var i = 0; i < markers.length; i++) {

var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),

parseFloat(markers[i].getAttribute("lng")));map.addOverlay(new GMarker(point));

}});

• 使用GDownloadUrl下载xml格式的标注文件并显示



• 使用GDownloadUrl下载xml格式的标注文件并显示


Maps API高级功能 – 创建自定义控件

• 从GControl派生自定义控件子类

• 重载以下父类方法

– initialize()

– getDefaultPosition()

• 更多可以重载的方法

– setButtonStyle()


Maps API高级功能 –创建自定义控件

function TextualZoomControl() {}TextualZoomControl.prototype = new GControl();TextualZoomControl.prototype.initialize = function(map) {// 此处加入创建文本按钮<div>元素的代码return div;

}

// 设置缺省控件位置TextualZoomControl.prototype.getDefaultPosition = function() {return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(20, 20)); }

• 创建一个自定义文本按钮



…// 设置控件CSS属性TextualZoomControl.prototype.setButtonStyle_= function(button){button.style.textDecoration = "underline";button.style.color = "#0000cc"; …}

var map = new GMap2(document.getElementById("map"));map.addControl(new TextualZoomControl());map.setCenter(new GLatLng(39.9, 116.4), 8);



Maps API最新功能 – 标注管理器

• 当大量标注需要在同一个地图区域显示时，可以使用标注管理器(GMarkerManager)为每个标注指定在何缩放级别显示

var mgrOptions = {borderPadding:50,maxZoom:15,trackMarkers:true };mgr = new GMarkerManager(map, mgrOptions);

mgr.addMarkers(getWeatherMarkers(20), 3);mgr.addMarkers(getWeatherMarkers(200), 6);mgr.addMarkers(getWeatherMarkers(1000), 8);mgr.refresh();…function getWeatherMarkers(n) {var pts = [];for (var i = 0; i < n; ++i)pts.push(new GMarker(getRandomPnt(),{icon:getWeatherIcon()}));

return pts;}

指定显示缩放级别


Maps API最新功能 – 标注管理器

缩放级别：3

缩放级别：8

缩放级别：6

缩放级别越高，看到的标注越多


Maps API在中国目前尚未完全支持的功能

• 地址定位(Geocoding)

• 驾车路线查询与本地搜索(Directions and Localsearch)

• KML与GeoRSS

• 我的地图(MyMaps)


更多Google Maps API的信息

• 中文文档

http://www.google.com/intl/zh-CN/apis/maps/

• 英文文档

http://www.google.com/apis/maps/

• 讨论组

http://groups.google.com/group/Google-Maps-API

• 中文Google Maps API示例

http://www.google.com/intl/zh-CN/apis/maps/demo/index.html

http://www.google.com/intl/zh-CN/apis/maps/

http://www.google.com/apis/maps/

http://groups.google.com/group/Google-Maps-API

http://www.google.com/intl/zh-CN/apis/maps/demo/index.html/

google maps api for china6 google confidential google maps api • 基本功能及使用 –...

Documents