Google地图API高级特性.PDFVIP

Google 地地图图 API 高高级特性级特性 地地图图 高高级级特性特性 李 双 峰 2009-06-05 Google 地图 • 在浏览器中展现包含地理信息的数据 • 可拖动放缩的地图 • 卫星地图、地形图、实时交通图、街景图 • 地址定位、周边搜 、驾车路线、公交查询 • 更多地理产品 – Google Earth – 手机版本(GMM) – Google Sky – … 2 什么是Google地图API? Control • 只用Javascript、 HTML和CSS在您的 SmallMapControl MapTypeControl 网站轻松创建交互式 地图 InfoWindow • 可定制地图 – 定制显示内容 – 定制地图事件 – 定制地图控件 – 定制底图 Marker Polyline Overlay 3 Hello World! script type=text/javascript src=/maps?file=apiv=2key=ABQ... sensor=false/script div id=my_map style=width: 400px; height: 400px/div var map = new GMap2 (document.getElementById(my_map)); map.setCenter(new GLatLng(39.917, 116.397), 11); var marker = new GMarker (new GLatLng(39.92, 116.40)); map.addOverlay(marker); marker.openInfoWindowHtml (朝三暮四酒吧 ); 4 问 答 ? 问 定位： • 如何知道五道口的坐标 ？如何知道某个坐标的地址？ • 如何让西安的用户打开地图时默认位置是西安？ • 用户如何知道当前浏览的地图的位置 ？ • 周边搜索：找到五道口附近的酒吧、银行？ • 交通：能显示驾车路线么？步行 ？公交路线？ • 有没有更有趣的地图 – 比如月球图，火星图？ – 可以用自己画的地图么 ？比如校园地图、三国地图… • 在不支持JS （如手机）的环境可以显示地图么？ • 可以用地图做游戏么？ Flash游戏 ？可以做3D游戏么？ 6 地址解析(geocode) • 地址解析: 地址 = 坐标 – 告诉我“五道口”的坐标？ • JS API – class GClientGeocoder • getLocations, getLatLng var geocoder = new GclientGeocoder(); geocoder.getLatLng(五道口五道口 , function(point) {...}); 五道口五道口 geocoder.getLocations(五道口五道口 , function(location) {...}); 五道口五道口 • HTTP /maps/geo?q=北京 output=jsonkey=YOUR_KEYse