google map开发学习笔记（二）

最新推荐文章于 2018-12-03 19:50:23 发布

xo_zhang

最新推荐文章于 2018-12-03 19:50:23 发布

阅读量622

点赞数

分类专栏： google map 文章标签： google map开发学习笔记二

google map 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上一节我们实现了Google地图的最简单的功能，就是一个方块的地图，其他什么都没有，使用过Google地图的人都知道，在Google地图上面的左上角有一个控制地图上下左右移动和缩放的控制器，在地图的右上角有地图，卫星，地形可供选择的三种类型。这一节我们就来加入这两个功能，很简单，使用map的添加控制器方法就可以了。

addControl()方法，需要一个参数

参数值：

GLargeMapControl，最大模式控制器；

GSmallMapControl，最小模式控制器；

GSmallZoomControl，只有放大和缩小的模式；

GScaleControl，只有地图缩放控制条的模式；

如果需要添加地图类型控制器，那就需要这个参数值

GMapTypeControl，添加地图类型控制器允许在地图视图、卫星视图和地图卫星混合模式, 三个模式中切换

设置地图显示模式

setMapType()

内建 3 种模式, 分别是 G_NORMAL_MAP:地图模式,G_SATELLITE_MAP:卫星模式,G_HYBRID_MAP:混合模式:不设置默认是地图模式

上代码：

[xhtml] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<mce:script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false" mce_src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false"
type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
function initialize() {
//检查浏览器兼容性
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
//最大模式
map.addControl(new GLargeMapControl());
//缩小模式
//map.addControl(new GSmallMapControl());
//只有放大和缩小的模式
// map.addControl(new GSmallZoomControl());
//只有地图缩放控制条的模式
// map.addControl(new GScaleControl());
// 填加地图类型控制器允许在地图视图、卫星视图和地图卫星混合模式, 三个模式中切换
map.addControl(new GMapTypeControl());
// 可以通过GMap2.setMapType()方法修改地图的显示模式
// 内建 3 种模式, 分别是 G_NORMAL_MAP:地图模式,G_SATELLITE_MAP:卫星模式,G_HYBRID_MAP:混合模式:
map.setMapType(G_NORMAL_MAP);
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
}
}
// --></mce:script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width:800px;height:600px;"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google Maps JavaScript API Example</title>
    
     
    <mce:script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false" mce_src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false" 
            type="text/javascript"></mce:script>
     
    <mce:script type="text/javascript"></mce:script> 
  </head>
   
  <body οnlοad="initialize()" οnunlοad="GUnload()"> 
    <div id="map_canvas" style="width:800px;height:600px;"></div> 
  </body> 
</html>

具体参考：http://code.google.com/intl/zh-CN/apis/maps/documentation/introduction.html

xo_zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google map开发学习笔记（二）

上一节我们实现了Google地图的最简单的功能，就是一个方块的地图，其他什么都没有，使用过Google地图的人都知道，在Google地图上面的左上角有一个控制地图上下左右移动和缩放的控制器，在地图的右上角有地图，卫星，地形可供选择的三种类型。这一节我们就来加入这两个功能，很简单，使用map的添加控制器方法就可以了。addControl()方法，需要一个参数参数值：GLargeMapCo
复制链接

扫一扫

专栏目录