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

google地图数据
像素坐标
pixelcoordinate
Zoomlevel=0 256*256
Zoomlevel=1 512*512
pixelCoordinate = worldCoordinate * 2zoomLevel
Zoomlevel=2 1024*1024
google地图数据
图块坐标
pixelcoordinate
0,0 Zoomlevel=0 256*256 1,0 0,0 1,0 2,0 3,0
0,1
1,1
0,1
1,1
2,1
3,1
Zoomlevel=1 512*512
0,2
1,2
2,2
3,2
pixelCoordinate = worldCoordinate * 2zoomLevel tileCoordinate= pixelCoordinate/256 取整
服务本地化
加载本地的地图数据
/vt?src=apiv3&x= 2&y=2&z=2
x=812,y=420,z=10
function(coord, zoom, ownerDocument) { var div = ownerDocument.createElement ('div'); div.innerHTML ='<img src="./tiles/' + zoom + '/' + coord.x + '/' + coord.y + '.png"/>';
0,3
1,3
2,3
3,3
Zoomlevel=2 1024*1024
关于JavaScript的兼容
坐标转换
0,0 1,0
0,1
1,1
地理坐标
世界坐标
像素坐标
图块坐标
google地图数据
缩放级别 （zoom）
0,0 1,0 2,0 3,0
中心点 （center）
地图类型 （mapType） 地图容器 （div）
地图容器 （div）
Thank You!
L/O/G/O

1
2 3
google提供的js库文件 google提供的地图数据
google提供的技术支持，例如 查 找路径、周边搜索
google提供的js库文件
常用功能一：在页面中加入Google Map服务
<script type="text/javascript" src="/maps/api/js?sensor=false"></script> 或者/maps/api/js?v=3.1&sensor=false Maps API 的 JavaScript 代码通过请求 /maps/api/js 的引导程序网址进行加载。 该引导程序请求会加载所有的 JavaScript 主对象，以便在 Maps API 中使用。
Var map = new google.maps.Map(tByIdx_x("map_c anvas"), myOptions); var coordinateMapType = new CoordMapType(); map.mapTypes.set('coordinate',coordinateMapType) ;
服务本地化
加载本地的地图数据
CoordMapType titleSize maxZoom getTile() CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
mapTypeId: google.maps.MapTypeId.ROADMAP
}; Var map = new google.maps.Map(document.getElementByIdx_x("map_c anvas"), myOptions); map.overlayMapTypes.insertAt(0, new CoordMapType( ) );
var infowindow = new Window({
content：„Hello World‟，
position：new tLng(39.9629,116.3581) }); infowindow.open(map);
在标记点显示
infowindow.open(map，marker);
监听事件
监听函数
google地图数据
地理坐标
geographiccoordiate
通过构造一个坐标对象可以确定地 球上唯一一个点 new tLng( 39.9629,116.3581);
google地图数据
世界坐标
worldcoordinate
•缩放级别为0 •像素为256*256的png图像 •世界坐标空间为 {0-256}, {0-256} •每个地理坐标点对应唯一一个世界 坐标
0,1
1,1
2,1
3,1
0,2
1,2
2,2
3,2
0,3
1,3
2,3
3,3
通过在线google地图的移动，可以看出google map会去 类似这样的地址 /vt?src=apiv3&x=2&y=2&z=2 /vt?src=apiv3&x=3&y=2&z=2 /vt?src=apiv3&x=2&y=3&z=2 /vt?src=apiv3&x=3&y=3&z=2
google提供的js库文件
常见问题二： double-margin bug 常用功能三：向地图中添加标记—构造Marker对象
google提供的js库文件
常用功能四:添加信息窗口—构造 InfoInfoWindow对象
窗口内容 （content） 所在位置 （position） 所在地图 （map）
Google map api
Google map api 基本功能使用及服务本地 化的解决方案
L/O/G/O

Contents
GoogleMapsAPI是Google为开发者提供的Maps编程API。它允许开发者在 不必建立自己的地图服务器的情况下，将GoogleMaps地图数据嵌入到网站 之中，从而实现嵌入GoogleMaps的地图服务应用，并借助GoogleMaps的 地图数据为用户提供位置服务。 Google map api 是javascript 形式的接口，利用javascript，用户可以像 google地图一样在自己的地图上添加覆盖物，比如标记、折线，或者响应用 户的点击动作，并显示包含内容信息在内的气泡提示窗口。可以将google 地图服务分为3个部分来看待：
存在的问题
online
●不能连接外网 ● 地图不满足需求 ● 放大到一定级别没有想要的瓦片
Q
●google map服务本地化 ●添加地图叠加层
A
offline
服务本地化
将与服务器交互的js文件本地化
把google map加载时候，所需要的js下载到本地，以 后再应用程序开发的时候，不引用google站点上的js ，而是换成本地的js文件。具体有些什么js需要下载 的，这里就不做详细介绍了，可以通过firefox的 firebug插件，或是google chrome等工具查看到http 请求，分析并下载有效的js文件，可能还需要分析各 个js之间在使用过程中加载外链js的地址，并予以修 改、替换问对本地js的调用。
div.innerHTML ='<img src="./tiles/' + zoom + '/' + coord.x + '/' + coord.y + '.png"/>';
<<interface>>
MapType getTile()
div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.fontSize = '10'; div.style.borderStyle = 'solid'; div.style.borderWidth = '1px'; div.style.borderColor = '#AAAAAA'; return div; };
常用功能二：加载Google Map—构造Map对象
google提供的js库文件
常见问题二： double-margin bug 常用功能三：向地图中添加标记—构造Marker对象
标记位置 （position） 所在地图 （map） 标记图标 （icon） 标记标题 （title）
var marker1 = new google.maps.Marker({ position: new tLng( 39.9629,116.3581), map: map, icon:”image.png”, title:“marker" });
mapTypeId: google.maps.MapTypeId.ROADMAP };
地图容器 （div）
Var map = new google.maps.Map(document.getElementByIdx_x("map_c anvas"), myOptions);
google提供的js库文件
main.js
不同参数
html
引导程序 （.js）
util.js
onion.js
google提供的js库文件
常用功能二：加载Google Map—构造Map对象
缩放级别 （zoom） 中心点 （center） 地图类型 （mapType）
var myOptions = { zoom: 16,
center: new tLng(39.9629,116.3581),
google提供的js库文件
常用功能四:添加信息窗口—构造 InfoInfoWindow对象
google提供的js库文件
常用功能五：事件绑定—调用addListener函数
监听对象
(1)监听地图的缩放： 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);
地图容器 （div）
与服务器交互的js文件
加载Google Map——作为叠加图层
缩放级别 （zoom） 中心点 （center） 地图类型 （mapType）
var myOptions = { zoom: 16,
center: new tLng(39.9629,116.3581),
服务本地化
加载Google Map ——作为基础图层
缩放级别 （zoom） 中心点 （center） 地图类型 （mapType）
var myOptions = { zoom: 16,
center: new tLng(39.9629,116.3581),
// mapTypeId: google.maps.MapTypeId.ROADMAP mapTypeId: "coordinate" };