Google Map 属性与方法

地图状态

地图状态

 

方法	返回值	说明
isLoaded()	布尔值	如果地图已经被setCenter()初始化，则返回true.
getCenter()	GLatLng	返回地图中心点的地图坐标.
getBounds()	GLatLngBounds	返回地图视口范围的矩形区域的地理坐标.
getBoundsZoomLevel(bounds)	数字	返回显示指定的区域需要的最适合的地图缩放等级.该缩放等级是根据当前的地图类型计算出来的，如果还没有指定地图类型,将使用地图类型数组之中的第一项.
getSize()	GSize	返回地图视口的像素大小.
getZoom()	数字	返回当前的缩放等级.

 

 

更改地图状态

 

方法	返回值	说明
setCenter(center, zoom?, type?)	无	将地图视图切换到指定的中心点,也可以同时设置可选的地图缩放等级和地图类型.地图类型必须已经添加到地图.请参看构造函数和addMapType().该方法必须在构造地图实例之后初始化地图状态时立即执行.在地图刚刚构造的时候调用地图其他的方法都将会产生错误.
panTo(center)	无	设置地图的中心点到指定的坐标，如果该点已经在当前的视口之中，则地图中心会滑动到该位置.
panBy(distance)	无	地图滑动指定的像素距离.
panDirection(dx, dy)	无	以指定的方向滑动地图宽度一半的距离.+1代表右方和下方,-1代表左方和上方.
setZoom(level)	无	设置地图的缩放等级到给定值.
zoomIn()	无	缩小地图(将地图的缩放等级增加1).
zoomOut()	无	放大地图(将地图的缩放等级减少1).
savePosition()	无	保存地图当前的位置和缩放等级,以供以后通过returnToSavedPosition()方法来返回当前视图.
returnToSavedPosition()	无	返回到上一次通过savePosition()保存的地图视图.
checkResize()	无	检查地图容器(container)的大小是否已经发生变化,在地图容器DOM大小可能发生变化的时候调用该方法,以便地图能进行自动调整.

 

 

标注

 

方法	返回值	说明
addOverlay(overlay)	无	在地图上添加一个标注并触发地图的addoverlay事件.
removeOverlay(overlay)	无	在地图上删除指定的标注.如果该标注确实在地图上，则触发removeoverlay事件.
clearOverlays()	无	删除所有地图上的标注，并触发clearoverlays事件.
getPane(pane)	HTML节点	返回用来包含指定pane中对象的层.该方法被GOverlay实例的初始化方法GOverlay.initialize()来调用以便将自身添加到地图

 

信息浮窗

 

方法	返回值	说明
openInfoWindow(point, node, opts?)	无	在指定的地理点打开一个简单的信息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以DOM节点的形式给定.
openInfoWindowHtml(point, html, opts?)	无	在指定的地理点打开一个简单的信息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以HTML文本的形式给定.
openInfoWindowTabs(point, tabs, opts?)	无	在指定的地理点打开一个分标签的信息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以DOM节点的形式给定.
openInfoWindowTabsHtml(point, tabs, opts?)	无	在指定的地理点打开一个分标签的信息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以HTML文本的形式给定.
showMapBlowup(point, opts?)	无	在指定的地理点打开一个显示指定点更近的视图的信息浮窗.
closeInfoWindow()	无	关闭当前打开的信息浮窗.
getInfoWindow()	GInfoWindow	返回地图的信息浮窗对象.如果当前并不存在信息浮窗,则创建一个信息浮窗而不显示它.这个操作并不被enableInfoWindow()影响.

 

 

打开信息浮窗

----------------------------------------------------------------------------

var map = new GMap2(document.getElementByIdx("map"));
map.setCenter(new GLatLng(36.94,106.08),4);
map.openInfoWindow(map.getCenter(),
document.createTextNode("你好，中国"));

----------------------------------------------------------------------------

 

 

描点

 

构造函数	说明
GMarker(point, icon?, inert?)	在指定位置point使用指定图标icon或G_DEFAULT_ICON创建一个标记.如果inert参数为true,该标记将不可点击而且没有任何参数.(2.50版本不再支持)
GMarker(point, opts?)	在指定位置point使用指定的选项GMarkerOptions创建一个标记.默认标记能够点击并使用默认图标G_DEFAULT_ICON. (从 2.50开始支持)

 

 

----------------------------------------------------------------------------

var point = new GLatLng(pointx,pointy);
map.addOverlay(new GMarker(point));

----------------------------------------------------------------------------

 

 

描线

 

GPolyline(points, color?, weight?, opacity?)

使用一组点创建一条折线.color是代表折线颜色的十六进制字符串.weight是以像素为单位的线宽.opacity是从0到1的数，代表折线的不透明度.

 

----------------------------------------------------------------------------

//随机取五个点连成折线，5个点按照经度排序防止折线自身交叉.
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));

//map.addOverlay(new GPolyline(points,"#000000",1,0.5));

----------------------------------------------------------------------------

 

 

单击事件句柄

----------------------------------------------------------------------------

GEvent.addListener(map, "click", function(marker, point) { //单击
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});

----------------------------------------------------------------------------

 

 

 

在标记上显示信息浮窗

----------------------------------------------------------------------------

//添加10个位置随机的标记
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}

 

function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
});
return marker;
}

----------------------------------------------------------------------------

 

 

分标签的信息浮窗

 

GInfoWindowTab(label, content)

创建一个用来传递给openInfoWindowTabs*()方法的tabs参数的信息浮窗标签.

 

----------------------------------------------------------------------------

//信息浮窗内容
var infoTabs = [
new GInfoWindowTab("环境", "天坛公园很漂亮，祈年殿尤其不错"),
new GInfoWindowTab("饮食", "仅次于一般")
];

//在地图的中心添加一个标记并自动打开其信息浮窗
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);

----------------------------------------------------------------------------

创建图标

类 GIcon

图标用来指定GMarker在地图上的显示图片.为了浏览器兼容性考虑,指定一个图片是比较复杂的工作.注意您可以使用创建好的默认图标G_DEFAULT_ICON，假如您不想自己创建的话.

构造函数

 

构造函数	说明
GIcon(copy?, image?)	创建新的图标对象.如果在可选参数copy之中给出了另一个图标,则将直接复制该图标的属性到新图标,否则属性将被置空. 可选参数image设置图标的image属性.

 

常量

 

常量	说明
G_DEFAULT_ICON	标记所使用的默认图标.

 

属性

 

属性	类型	说明
image	字符串	图标使用的前景图片URL地址.
shadow	字符串	图标的阴影图片URL地址.
iconSize	GSize	图标前景图片的大小.
shadowSize	GSize	图标的阴影图片的大小.
iconAnchor	GPoint	图标前景图片上用来锚定到地图上的点相对图片左上角的位置.
infoWindowAnchor	GPoint	图标前景图片上用来被信息浮窗锚定的点相对图片左上角的位置.
printImage	字符串	用来在打印的时候使用的前景图片的URL地址，大小必须和image指定的前景图片相同.
mozPrintImage	字符串	用来在FireFox/Mozilla打印的时候使用的前景图片的URL地址，大小必须和image指定的前景图片相同.
printShadow	字符串	用来打印的阴影图片路径，必须是一个GIF图片，因为大部分的浏览器不支持PNG图片的打印.
transparent	字符串	前景图片的透明版本图片的URL地址，该图片用来在IE之中捕获用户点击事件.该图片必须是一个24位的PNG图片,就是前景图片使用1%不透明度，形状和大小都相同.
imageMap	数字数组	一组代表图标图片上的x/y坐标的整数数组，用来在非IE浏览器之中指定图标图片的可点击区域.

 

----------------------------------------------------------------------------

//创建小图标
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

 

map.addOverlay(new GMarker(point, icon));
----------------------------------------------------------------------------