Mapplets codelab乔健2008-06-12

3

什么是 Mapplet?

• 一种在 Google 地图上运行的小应用程序• 一个包括 HTML 和 javascript 的 XML 文件

4

为什么要开发 mapplets

• 具有大部分 map api 的功能• 将您的创意或品牌展示给众多的 Google 地图使用者• 使自己的服务或内容方便的与地图结合• 为自己的网站带来流量• 编写简单，无需维护

5

开始动手体验

• 首先打开 http://ditu.google.com/preview

• 点击右上角的“登录”按钮，登录自己的 gmail 帐号• 这里你可以试用一下默认的 mapplet

• 如果没有 gmail 帐号，可以使用如下方法访问 mapplet

– http://ditu.google.com/maps/mpl?moduleurl=<url>

– http://china-dizhen.googlecode.com/svn/trunk/mapplets/earthquake.xml

6

如何添加 mapplet

• 点击左边的“添加内容”按钮• 点击最上面的搜索按钮后的“按网址添加”• 输入 mapplet 的地址，然后点击“添加”按钮• 添加成功后会有提示• 点击左上角的“返回 Google 地图”体验新添加的

mapplet

7

添加开发用的 mapplet

• 加入两个开发用的 mapplet ：– http://www.google.com/ig/modules/geodeveloper.xml

– http://www.google.com/ig/modules/geoscratchpad-cn.xml

• developer mapplet 对每个 mapplet 提供 “重新装载”按钮。

• Scratch pad 允许交互式编辑代码并可以立即预览。

• 如果没有 gmail 帐号，使用如下链接– http://ditu.google.com/maps/mpl?moduleurl=

http://www.google.com/ig/modules/geoscratchpad-cn.xml

8

开发过程

• 将代码复制到 scratch pad 中调试• 或 将 xml 代码放在网上，在我的地图中添加自己的

mapplet ，每次修改后点击重新加载

9

官方文档

Mapplet 文档：

http://code.google.com/apis/maps/documentation/mapplets/guide.html

中文版 : http://code.google.com/intl/zh-CN/apis/maps/documentation

/mapplets/guide.html

Segue Slide

11

Hello world

• Helloworld ：不控制地图，在地图左侧显示 Hello World!

<?xml version="1.0" encoding="UTF-8"?><Module><ModulePrefs title="Hello World" description=" 在左侧面板中显示 Hello World 消息 !" author=" 您的姓名 " author_email="your-email@gmail.com" height="150"></ModulePrefs><Content type="html"><![CDATA[

<h2>Hello World!</h2>

]]></Content></Module>

12

使用 Marker

Marker ： 在北京添加一个 marker ，信息窗口显示 Hello World

<script> // 将地图中心定位于北京 var map = new GMap2(); var point = new GLatLng(39.92, 116.46); map.setCenter(point, 4);

// 在地图中心添加一个标记 var marker = new GMarker(point); map.addOverlay(marker);

// 打开一个 "Hello World" 信息窗口 var message = "Hello World!"; marker.openInfoWindowHtml(message);</script>

<Require feature="sharedmap"/>

13

14

地图交互

Interaction ：在当前地图范围内随机添加 5 个点，并显示中心点var bounds = map.getBoundsAsync(function(bounds) { var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); // 在地图范围内随即添加 5 个点 for (var i = 0; i < 5; i++) { var point = new GLatLng(southWest.lat() + latSpan*Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(new GMarker(point)); }});

map.getCenterAsync(function(center) { … });

15

16

移动地图

Movemap ： 2 秒之后将地图移动到上海位置

var point = new GLatLng(31.22, 121.47); window.setTimeout(function() { map.panTo(point); map.addOverlay(new GMarker(point)); }, 2000);

17

18

事件处理

Event ：给 marker 添加一个事件，点击时弹出信息窗口

var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<b> 点击后显示我 </b>"); }); map.addOverlay(marker);

19

20

事件处理 续

event_2 ：移动地图时 marker 弹出信息窗口，第 2 次移动后不再显示。不用的 listener 要及时删除节省资源

var count = 0; var listener1 = GEvent.addListener(map, "movestart", function() { count++; }); var listener2 = GEvent.addListener(map, "moveend", function() { marker.openInfoWindow(" 第 " + count + " 次 "); if (count == 2) { GEvent.removeListener(listener1); GEvent.removeListener(listener2); }});

21

22

可拖动的 marker

Draggable_marker ：可移动的 marker ，并且停止时会弹跳。移动时显示“正在拖动”，停止后显示“正在弹跳”。

var marker = new GMarker(point, {draggable: true, bouncy:true});map.addOverlay(marker); GEvent.addListener(marker, "dragstart", function() { marker.openInfoWindowHtml(" 开始拖动 ..."); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml(" 正在弹跳 ..."); });

23

24

定制图标

Icon ：将 marker 的图标更换成小旗子，点击地图时在当前点加入marker

可以更换 marker 的图片var url = "http://www.google.com/intl/zh- CN_cn/mapfiles/ms/micons/flag.png"; GEvent.addListener(map, "click", function(o, point) { var myIcon = new GIcon(G_DEFAULT_ICON, url); myIcon.iconSize = new GSize(32, 32); var marker = new GMarker(point, { icon: myIcon}); map.addOverlay(marker); });

25

26

折线

Polyline ：在地图上随机产生 5 个点，并画折线Map.addOverlay(new Polyline(points, 颜色，线宽，透明度 )

var points = [];// 在地图范围内随即添加 5 个点 for (var i = 0; i < 5; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(new GMarker(point)); points.push(point); } map.addOverlay(new GPolyline(points, "#ff0000", 5, 0.7));

27

28

多边形

Polygon ：将上个例子的折线改为画多边形new GPolygon(points, 轮廓颜色，轮廓厚度，轮廓透明度，填充颜色，

填充透明度 )

// 闭合折线 points.push(points[0]); map.addOverlay(new GPolygon(points, "#ff0000", 5, 0.7, "#0000ff", 0.4));

29

30

地址解析

Geocoder ：在北京位置增加一个 marker

var geocoder = new GClientGeocoder(); var address = " 北京市 "; geocoder.getLatLngAsync(address, function(latlng) { if (!latlng) { alert(" 不能解析 :" + address); } else { var marker = new GMarker(latlng); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(address); }); map.addOverlay(marker); } });

31

32

获得外部数据

Fetch ：获得外部 xml 数据，并利用这些数据画一条折线

var url = "http://chinamaps.googlecode.com/svn/ mapplets/gddcodelab/points.xml";_IG_FetchXmlContent(url, function(response) { var markers = response.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var point = markers.item(i); var lat = point.getAttribute("lat"); var lng = point.getAttribute("lng"); var latlng = new GLatLng(lat, lng); }}

33

Segue Slide

35

1. 在地图上显示一些奥运比赛场馆

- 数据在 data1.txt 中- 每个 item 包括 name, link, image, description, lat, lng

- 在地图上标出 marker ， 点击 marker 时打开信息窗口显示信息

36

37

2. 显示奥运火炬接力路线

- 数据在 data2.txt 中- 每个城市包括 name, link, image, lat, lng

- 两个作为 marker 的图片- 实现效果：每隔几秒钟火炬到达的城市更换 marker 图标，自动打开信

息窗口

38

39

40

3. 显示各大城市天气情况

- 天气图片链接存放在 data3.txt 中- 天气数据在 weather.xml 中，同时存放在远程目录 http://chinamaps.googlecode.com/svn/mapplets/gddcodelab/weather.xml

- 要求：远程访问 xml天气数据，利用地址解码服务，将各大城市的天气情况显示在地图上。

41

42

把 mapplets 分享给别人

• 链接 http://ditu.google.com/ig/add?synd=mpl&pid=mpl

&moduleurl=< URL of your mapplet>

43

官方文档

Mapplet 文档：

http://code.google.com/apis/maps/documentation/mapplets/guide.html

中文版 : http://code.google.com/intl/zh-CN/apis/maps/documentation

/mapplets/guide.html