一步一步定制自己的google map（预备知识）

在很多网站上面看到有用到地图功能的，于是想在自己的网站中实现地图搜索的相关功能。

 

1）要申请google地图的API密钥，申请之前必须有注册gmail邮箱。具体网址如下：

http://code.google.com/intl/zh-CN/apis/maps/signup.html

 

2）复制下来一段关于网站API密钥的JavaScript代码。

  <script src="http://maps.google.com/maps?file=api&v=2&sensor=TRUE or false&key=ABQIA" type="text/javascript"></script>

要记得把sensor=TRUE or false改变成sensor=TRUE 或者sensor= false，不然在你上传到服务器上的时候会出错

 

3）然后就是用JavaScript语言创建地图啦。

var map;
function setupMap()
{
if (GBrowserIsCompatible()) {  //验证浏览器是否支持GMap2对象验证的方法是GBrowserIsCompatible，用返回的布尔值来判断网页浏览器是否符合运行Google Maps的要求。如果返回真，则代表这个浏览器可以查看Google Maps；如果返回否，则不行。
map = new GMap2(document.getElementById("map1")); //创建GMap对象了，GMap2的构造函数结构如下：var newMapobj = new GMap2(container: DOM_Div,  opts: Options);GMap2构造函数中的最后一个参数为GmapOptions类型，这个类型包含以下4个属性。size：设置地图容器的大小。值类型为GSize类型。mapTypes：设置GMapType数组
map.setCenter(new GLatLng(31.7,131.2), 10); //setCenter设置了地图的中心，一般情况下是必须的。GMap对象只有设置地图中心之后，才会被标识为已加载。采用isLoaded方法返回true；否则返回false
}
}
</script>
<div id="map1" style="width: 600px; height: 400px" ></div>  <!--创建GMap对象首先需要在网页上有一个容器元素作为创建基础，而通常情况下，这个容器元素是个Div元素-->
</body>

 

这时候发现只是显示一张地图，没有任何其他控件。如果我想要缩小，我想要扩大怎么办？那就一步步美化添加吧

//GMap2的控件方法一共有3个，分别是添加控件（addControl）、删除控件（removeControl）和获得地图容器（网页上的DOM元素，原本对象构建函数的参数）的名称getContainer。
//addControl(control,  position)：按照给定的位置（Position）添加一个控件.所有的这些Google Maps控件都继承自Gcontrol类，并实现Gcontrol接口，Google Maps提供了八种控件
//map.addControl(new GSmallMapControl()); 缩放平移按钮控件
map.addControl(new GLargeMapControl());  //缩放平移按钮及滑块控件
//map.addControl(new GSmallZoomControl()); 缩放按钮控件
map.addControl(new GScaleControl()); //地图比例尺控件
//map.addControl(new GMapTypeControl()); //地图类型控件
map.addControl(new GMenuMapTypeControl());//下拉菜单式地图类型控件
//map.addControl(new GHierarchicalMapTypeControl());  嵌套的地图类型控件
map.addControl(new GOverviewMapControl()); //鹰眼控件
//removeControl(control)：删除一个控件.这里传入的是控件对象本身。
//getContainer()：取得地图的容器.一般而言，地图的容器就是在网页上的GMap2对象得以创建的DOM元素Div。

 

控件是有了，但是我想要一些互动性的操作，如果要鼠标滚轮移动时进行相关缩放那？给我们的google map加上一些属性吧。

map.enableDragging();  //设置地图可以被拖动。
// map.disableDragging(); 禁止地图被拖动。
// map.draggingEnabled() 返回地图是否能够被拖动的布尔值。如果能够拖动，返回“真”；否则返回“假”。
map.enableInfoWindow();  //设置地图信息窗口可以弹出。
// map.disableInfoWindow(); 禁止地图信息窗口弹出。
// map.infoWindowEnabled() 返回地图信息窗口是否能够被弹出的布尔值。如果能够弹出，返回“真”；否则返回“假”。这个方法通常作为检验之用。
map.enableDoubleClickZoom(); //设置可以双击缩放地图，左键双击为放大，右键双击为缩小（默认）
// map.disableDoubleClickZoom();禁止双击缩放地
// map.doubleClickZoomEnabled();返回地图是否可以双击缩放的布尔值。如果能够双击缩放，返回“真”；否则返回“假”。
map.enableContinuousZoom();//设置地图可以连续平滑地缩放。
// map.disableContinuousZoom();禁止地图连续平滑地缩放。
// map.continuousZoomEnabled();返回地图是否可以连续平滑地缩放的布尔值。如果能够连续平滑地缩放，返回“真”；否则返回“假”。
map.enableScrollWheelZoom();//设置地图可以由鼠标滚轮控制缩放。为了便于用户操作，通常把双击缩放和鼠标滚轮缩放都开放。这不失为一个好方法
// map.disableScrollSheelZoom();禁止由鼠标滚轮控制地图缩放。
// map.scrollWheelZoomEnabled();返回地图缩放是否可以由鼠标滚轮控制。如果能够由鼠标滚轮控制缩放，返回“真”；否则返回“假”。

 

如果我要在上面加个标记，然后在标记中加入一些提示信息怎么办那？

var markobj = new GMarker(new GLatLng(31.7,131.2),{draggable: true});

GEvent.addListener(markobj, "mouseover", function() {

markobj.openInfoWindowHtml("Hello world~ ");

});

map.addOverlay(markobj);

//Google Maps吸引用户的地方，除了精准的卫星影像图之外，还有就是地标。地标的信息一般需要通过信息窗口来展示，这些信息窗口不但能够显示文字，还能够显示HTML元素，以网页的形式展现文字、图片等数据。另外信息窗口还可以为GMap对象提供9种操作信息窗口的方法。这9种方法中，所有的options参数都是GinfoWindowOptions类对象，该类前一版本的API提供了7个属性，而当前的版本又增加了3个属性，一共10个属性.下面逐一讲解这9种信息窗口方法。
//openInfoWindow(point,node,options)：在给定的点位（Point）打开信息窗口。用户可以往信息窗口中添加某些DOM元素，比如：map.openInfoWindow(map.getCenter(),document.createTextNode("Hello world~"));
//openInfoWindowHtml(point,html,options)：在给定的点位（Point）打开信息窗口。用户可以往信息窗口中添加某些HTML元素，比如：map.openInfoWindowHtml (map.getCenter(),"Text Html one</b>Text Html two</b>");
//openInfoWindowTabs(point,tabArray,options)：在给定的点位（Point）打开标签信息窗口。用户可以往信息窗口中添加某些DOM元素。
//openInfoWindowTabsHtml(point,tabs,options)：在给定的点位（Point）打开标签信息窗口。用户可以往信息窗口中添加某些HTML元素。Options是GInfoWindowOptions选项。
//showMapBlowup(point,options)：在给定的点位（Point）打开一个信息窗口，窗口中包含该点周围的视场图片。类似于鹰眼功能，不过信息窗口中的图形与当前的地图位置，以及缩放比例相同，而没有鹰眼那样的全幅地图。而且信息窗口中的地图类型为两种，分别是着色底图地图【Map】按钮和卫星图像地图【Sat】按钮。
GEvent.addListener(markobj, "mouseover", function() {
markobj.showMapBlowup(new GLatLng(32.5500,-118.5032));
});
//updateInfoWindow(tabs,update)：更新信息窗口。
//updateCurrentTab(modifier，update)：更新当前的标签窗口。
//closeInfoWindow()：关闭信息窗口。
//getInfoWindow()：取得信息窗口对象，如果地图上没有信息窗口，则调用该方法时会创建一个新信息窗口，但不会显示出来。

//openInfoWindowHtml()、openInfoWindowTabs()等方法中需要用到的参数选项，其中的参数类型就是GInfoWindowOptions类型，该参数定义了信息窗口的状态，这个类型没有构造函数。GInfoWindowOptions方法介绍如下。
//selectedTab：根据输入值确定选择的信息标签框，序号是从0开始的。
//maxWidth：定义了信息窗口的宽度，单位是像素值。
//noCloseOnClick：定义了在地图上单击一下之后是否关闭信息窗口。默认值是false，表示关闭；如果设置为true，表示当在地图其他地方单击的时候不关闭信息窗口。
//onOpenFn：定义了一个回调函数入口，当打开信息窗口并且其中内容都出现之后，调用该函数。
//onCloseFn：定义了一个回调函数入口，当信息窗口关闭之后调用该函数。
//zoomLevel：设置了信息窗口中放大地图的缩放比例，用于设置showMapBlowup()方法。
//mapType：设置了信息窗口中放大地图的类型，用于设置showMapBlowup()方法。
//maxContent：信息窗口最大化时显示的内容，可以是HTML DOM元素。
//maxTitle：信息窗口最大化时显示的标题内容，可以是纯文本信息，也可以是HTML DOM元素。
//pixelOffset：这个方法的返回值是GSize类型（该类型在本章4.3.6节会有详细的讲解），该方法表示信息窗口移动的距离，单位是像素。