Mapplets codelab

2. 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

10. 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 <Require feature="sharedmap"/> <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>

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) { … });

16. 移动地图 Movemap：2秒之后将地图移动到上海位置 var point = new GLatLng(31.22, 121.47); window.setTimeout(function() { map.panTo(point); map.addOverlay(new GMarker(point)); }, 2000);

18. 事件处理 Event：给marker添加一个事件，点击时弹出信息窗口 var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<b>点击后显示我</b>"); }); map.addOverlay(marker);

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); } });

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("正在弹跳..."); });

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); });

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));

28. 多边形 Polygon：将上个例子的折线改为画多边形 new GPolygon(points, 轮廓颜色，轮廓厚度，轮廓透明度，填充颜色，填充透明度) // 闭合折线 points.push(points[0]); map.addOverlay(new GPolygon(points, "#ff0000", 5, 0.7, "#0000ff", 0.4));

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); } });

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); } }

34. Segue Slide

35. 1. 在地图上显示一些奥运比赛场馆 • 数据在data1.txt中 • 每个item包括name, link, image, description, lat, lng • 在地图上标出marker， 点击marker时打开信息窗口显示信息

37. 2. 显示奥运火炬接力路线 • 数据在data2.txt中 • 每个城市包括name, link, image, lat, lng • 两个作为marker的图片 • 实现效果：每隔几秒钟火炬到达的城市更换marker图标，自动打开信息窗口

40. 3. 显示各大城市天气情况 • 天气图片链接存放在data3.txt中 • 天气数据在weather.xml中，同时存放在远程目录 http://chinamaps.googlecode.com/svn/mapplets/gddcodelab/weather.xml • 要求：远程访问xml天气数据，利用地址解码服务，将各大城市的天气情况显示在地图上。

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