Google map api 基本功能使用及服务本地化的解决方案

1、L/O/G/O Google map api Google map api 基本功能使用及服务本地基本功能使用及服务本地化的解决方案化的解决方案google提供的js库文件google提供的地图数据google提供的技术支持，例如查 找路径、周边搜索 GoogleMapsAPI是Google为开发者提供的Maps编程API。它允许开发者在不必建立自己的地图服务器的情况下，将GoogleMaps地图数据嵌入到网站之中，从而实现嵌入GoogleMaps的地图服务应用，并借助GoogleMaps的地图数据为用户提供位置服务。Google map api 是javascript 形式的接口，利用jav

2、ascript，用户可以像google地图一样在自己的地图上添加覆盖物，比如标记、折线，或者响应用户的点击动作，并显示包含内容信息在内的气泡提示窗口。可以将google 地图服务分为3个部分来看待：1 23Contentsgoogle提供的提供的js库文件库文件 或者http:/ API 的 JavaScript 代码通过请求 http:/ 的引导程序网址进行加载。该引导程序请求会加载所有的 JavaScript 主对象，以便在 Maps API 中使用。常用功能一：在页面中加入常用功能一：在页面中加入Google Map服务服务 html引导程序（.js）不同参数main.jsutil.js

3、onion.jsgoogle提供的提供的js库文件库文件常用功能二：加载常用功能二：加载Google Map构造构造Map对象对象地图类型地图类型（mapType）缩放级别缩放级别（zoom）地图容器地图容器（div）中心点中心点（center）var myOptions = zoom: 16, center: new google.maps.LatLng(39.9629,116.3581), mapTypeId: google.maps.MapTypeId.ROADMAP ;Var map = new google.maps.Map(document.getElementByIdx_x(ma

4、p_canvas), myOptions);google提供的提供的js库文件库文件常用功能二：加载常用功能二：加载Google Map构造构造Map对象对象google提供的提供的js库文件库文件常见问题二：常见问题二： double-margin bug常用功能三：向地图中添加标记常用功能三：向地图中添加标记构造构造Marker对象对象标记图标标记图标（icon）标记位置标记位置（position）标记标题标记标题（title）所在地图所在地图（map） var marker1 = new google.maps.Marker( position: new google.maps.LatL

5、ng( 39.9629,116.3581), map: map, icon:”image.png”, title:“marker );google提供的提供的js库文件库文件常见问题二：常见问题二： double-margin bug常用功能三：向地图中添加标记常用功能三：向地图中添加标记构造构造Marker对象对象google提供的提供的js库文件库文件常用功能四常用功能四:添加信息窗口添加信息窗口构造构造 InfoInfoWindow对象对象所在地图所在地图（map）所在位置所在位置（position）窗口内容窗口内容（content）var infowindow = new google

6、.maps.InfoWindow( content：Hello World，position：new google.maps.LatLng(39.9629,116.3581) ); infowindow.open(map); infowindow.open(map，marker);在标记点显示google提供的提供的js库文件库文件常用功能四常用功能四:添加信息窗口添加信息窗口构造构造 InfoInfoWindow对象对象google提供的提供的js库文件库文件常用功能五：事件绑定常用功能五：事件绑定调用调用addListener函数函数监听函数监听函数监听事件监听事件监听对象监听对象(1)监

7、听地图的缩放：google.maps.event.addListener(map, zoom_changed, function() / 缩放级别变化后要执行的函数； );(2)标记的点击：google.maps.event.addListener( marker, click, function( event) / 点击事件后要执行的函数； infowindow.open(map，marker); );(3)监听dom事件:google.maps.event.addDomListener(window, load, initialize);google地图数据地图数据 地理坐标地理坐标geo

8、graphiccoordiate 通过构造一个坐标对象可以确定地通过构造一个坐标对象可以确定地球上唯一一个点球上唯一一个点new google.maps.LatLng( 39.9629,116.3581);google地图数据地图数据 世界坐标世界坐标 worldcoordinate缩放级别为缩放级别为0像素为像素为256*256的的png图像图像世界坐标空间为世界坐标空间为 0-256, 0-256每个地理坐标点对应唯一一个世界每个地理坐标点对应唯一一个世界坐标坐标Zoomlevel=1512*512google地图数据地图数据 像素坐标像素坐标 pixelcoordinate pixelC

9、oordinate = worldCoordinate * 2zoomLevelZoomlevel=21024*1024Zoomlevel=0256*256google地图数据地图数据 图块坐标图块坐标pixelcoordinate Zoomlevel=0256*256Zoomlevel=21024*1024pixelCoordinate = worldCoordinate * 2zoomLevelZoomlevel=1512*5120,01,11,00,11,00,03,12,11,31,11,20,30,20,13,23,32,32,23,02,0tileCoordinate=pixelC

10、oordinate/256 取整取整 关于关于JavaScript的兼容的兼容 坐标转换坐标转换 0,01,11,00,1地理坐标世界坐标像素坐标图块坐标google地图数据地图数据地图类型地图类型（mapType）缩放级别缩放级别（zoom）地图容器地图容器（div）中心点中心点（center）1,00,03,12,11,31,11,20,30,20,13,23,32,32,23,02,0通过在线google地图的移动，可以看出google map会去类似这样的地址http:/ onlineonlineofflineoffline不能连接外网不能连接外网 地图不满足需求地图不满足需求 放大到

11、一定级别没有想要的瓦片放大到一定级别没有想要的瓦片 A Q google map服务本地化服务本地化 添加地图叠加层添加地图叠加层服务本地化服务本地化将与服务器交互的将与服务器交互的js文件本地化文件本地化把google map加载时候，所需要的js下载到本地，以后再应用程序开发的时候，不引用google站点上的js，而是换成本地的js文件。具体有些什么js需要下载的，这里就不做详细介绍了，可以通过firefox的firebug插件，或是google chrome等工具查看到http请求，分析并下载有效的js文件，可能还需要分析各个js之间在使用过程中加载外链js的地址，并予以修改、替换问对本

12、地js的调用。服务本地化服务本地化 加载本地的地图数据加载本地的地图数据MapTypegetTile()CoordMapTypetitleSizemaxZoomgetTile()CoordMapTtotype.getTile = function(coord, zoom, ownerDocument) var div = ownerDocument.createElement(div); div.innerHTML =; div.style.width = this.tileSize.width + px; div.style.height = this.tileSize.hei

13、ght + px; div.style.fontSize = 10; div.style.borderStyle = solid; div.style.borderWidth = 1px; div.style.borderColor = #AAAAAA; return div;服务本地化服务本地化 加载本地的地图数据加载本地的地图数据http:/ zoom, ownerDocument) var div = ownerDocument.createElement(div); div.innerHTML =;服务本地化服务本地化加载加载Google Map 作为基础图层作为基础图层地图类型地图类

14、型（mapType）缩放级别缩放级别（zoom）地图容器地图容器（div）中心点中心点（center） var myOptions = zoom: 16, center: new google.maps.LatLng(39.9629,116.3581), / mapTypeId: google.maps.MapTypeId.ROADMAP mapTypeId: coordinate ;Var map = new google.maps.Map(document.getElementByIdx_x(map_canvas), myOptions);var coordinateMapType = new CoordMapType(); map.mapTypes.set(coordinate,coordinateMapType);与服务器交互的与服务器交互的js文件文件加载加载Google Map作为叠加图层作为叠加图层地图类型地图类型（mapType）缩放级别缩放级别（zoom）地图容器地图容器（div）中心点中心点（center） var myOptions = zoom: 16, center: new