谷歌地图简单入门 -

yangyangmilan

浏览: 30131 次
性别:
来自: 杭州

最近访客更多访客>>

u010650386

binbnsh

wanghxing123

未知萌

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (19)

社区版块

存档分类

谷歌地图简单入门

google

一、Hello world

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

<title> New Document </title>

</head>

<body>

</body>

var map = new GMap2(document.getElementById("mapContainer"));

map.setCenter(new GLatLng(33.0, 106.0), 5);

</script>

</html>

1.<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&v=2.x&sensor=false&key=ABQIAAAANRezeZZ4Y86oPrQq_VldhRRVHwv1xZ1uiERqpxy2XNaDfXdQnhSgufHt51owMdzuslJluCsiEbNIPg" type="text/javascript"></script>

网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签，使用注册 API 时收到的密钥。

key是密钥，v是版本

2.var map = new GMap2(document.getElementById("mapContainer")); 页面里必须有id为mapContainer的元素来放地图内容

3.map.setCenter(new GLatLng(33.0, 106.0), 5); 设置中心点，第一个参数是表示经纬度，第二个参数表示地图缩放等级。

二、简单讲解

1.<body onload="initialize()" onunload="GUnload()">

可以用initialize()方法来初始化地图，GUnload()方法是谷歌提供的，用来防止内存泄漏的实用工具函数。

2.new GLatLng(myLatitude, myLongitude)

myLatitude经度，myLongitude纬度

3.地图属性

G_NORMAL_MAP- 默认视图

G_SATELLITE_MAP - 显示 Google 地球卫星图像

G_HYBRID_MAP - 混合显示普通视图和卫星视图

G_DEFAULT_MAP_TYPES - 这三个类型的数组，在需要重复处理的情况下非常有用

map.setMapType(G_SATELLITE_MAP);

4.信息窗口

GMap2 对象提供了 openInfoWindow() 方法，该方法将一个点和一个 HTML DOM 元素作为参数。HTML DOM 元素附加到信息窗口容器中，信息窗口的尖端会固定在指定点上。

GMap2 的 openInfoWindowHtml() 方法相似，但是它使用 HTML 字符串作为其第二个参数而不是 DOM 元素。

map.openInfoWindow(map.getCenter(),

document.createTextNode("Hello, world"));

var myHtml= "<b>#" + number+ "</b><br/>" + message[number-1];

map.openInfoWindowHtml(map.getCenter(), myHtml);

5.事件监听器

1）点击地图后弹框

GEvent.addListener(map, "click", function() {

alert("您点击了地图。");

});

2）拖动地图后，显示经纬度

GEvent.addListener(map, "moveend", function() {

var center= map.getCenter();

document.getElementById("message").innerHTML= center.toString();

});

3）带参数的事件

GEvent.addListener(map,"click", function(overlay, latlng) {

if (latlng) {

var myHtml= "GPoint 为: " + map.fromLatLngToDivPixel(latlng) + ",

缩放级别:" + map.getZoom();

map.openInfoWindow(latlng, myHtml);

}

});

三、添加控件

GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。

GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。

GSmallZoomControl - 小型缩放控件（无平移控件），用于在 Google 地图上显示行车路线的小地图弹出窗口。

GScaleControl - 地图比例尺

GMapTypeControl - 让用户切换地图类型（例如“地图”和“卫星”）的按钮

GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。

GOverviewMapControl - 位于屏幕一角的可折叠概览地图。

map.addControl(new GLargeMapControl());

所有这些控件都基于 GControl 对象。

GMapTypeControl 和 GHierarchicalMapTypeControl 是特殊情况，因为它们还可以进行配置。这些控件增加的功能可以更改 Google 地图 API 中的地图当前所用的 GMapType。有关配置这些控件的详细信息，请参见修改标准控件的结构。

下面是当前支持的地图类型列表：

•G_NORMAL_MAP 显示 Google 地图默认的普通二维图块

•G_SATELLITE_MAP 显示拍摄的图块

•G_HYBRID_MAP 同时显示拍摄的图块和普通（突出显示道路、城市名等明显地图特征）图块

•G_PHYSICAL_MAP 根据地形信息显示实际地图图块

addControl 方法有第二个可选的参数 GControlPosition，可用于指定控件在地图上的位置。它可以是以下值之一，这些值分别指定要放置控件的地图某个角：

•G_ANCHOR_TOP_RIGHT

•G_ANCHOR_TOP_LEFT

•G_ANCHOR_BOTTOM_RIGHT

•G_ANCHOR_BOTTOM_LEFT

如果不包含此参数，则地图 API 会使用控件指定的默认位置。

GControlPosition 还可以指定偏移量，来指示控件的放置位置与地图边界间隔多少像素。这些偏移量使用 GSize 对象指定。

var bottomRight= new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));

map.addControl(new GMapTypeControl(), bottomRight);

四、地图叠加层

叠加层是地图上绑定到经度/纬度坐标的对象，会随您拖动或缩放地图而移动。叠加层用于反映您“添加”到地图上以指明点、线或区域的对象。。

地图 API 有如下几种叠加层：

•地图上的点使用标记来显示，通常显示自定义图标。标记是 GMarker 类型的对象，并且可以利用 GIcon 类型的对象来自定义图标。

•地图上的线使用折线（表示点的集合）来显示。线是类型为 GPolyline 的对象。

•地图上的区域显示为多边形（如果是任意形状的区域）或底面叠加层（如果是矩形区域）。多边形类似于闭合的折线，因此可以是任何形状。地面叠加层通常用于地图上与图块有直接或间接关联的区域。

•地图本身使用图块叠加层显示。如果您有自己的系列图块，可以使用 GTileLayerOverlay 类来改变地图上已有的图块，甚至可以使用 GMapType 来创建您自己的地图类型。

•信息窗口也是一种特殊的叠加层。但是请注意，信息窗口会自动添加到地图中，并且地图只能添加一个类型为 GInfoWindow 的对象。

每个叠加层都实现 GOverlay 接口。可以使用 GMap2.addOverlay() 方法向地图添加叠加层，使用 GMap2.removeOverlay() 方法删除叠加层。

1)标记

map.addOverlay(new GMarker(new GLatLng(x,y)));

可以拖动的标记

标记可点击但不可拖动，所以它们需要通过将额外的标记选项 draggable 设置为 true 来初始化。

var marker= new GMarker(center, {draggable: true});

GEvent.addListener(marker, "dragstart", function() {

map.closeInfoWindow();

});

GEvent.addListener(marker, "dragend", function() {

marker.openInfoWindowHtml("弹起来了...");

});

map.addOverlay(marker);

2）图标（标记）

var blueIcon= new GIcon(G_DEFAULT_ICON);

blueIcon.image= "http://www.google.cn/intl/en_us/mapfiles/ms/micons/blue-dot.png";

var markerOptions= { icon:blueIcon};

map.addOverlay(new GMarker(point, markerOptions));

3) 折线

折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色应是十六进制数字 HTML 样式，例如使用 #ff0000 而非 red。GPolyline 无法识别命名颜色。

GPolyline 对象使用浏览器的矢量绘制功能（如果可用）。在 Internet Explorer 中，Google 地图使用 VML（请参阅 XHTML 和 VML）绘制折线；在其他浏览器中使用 SVG（如果可用）。在所有其他环境中，我们从 Google 服务器请求一个线段图像并将该图像叠加到地图上，当地图缩放和拖动时按需要刷新图像。

以下代码段会在两点之间创建 10 像素宽的红色折线：

var polyline= new GPolyline([

new GLatLng(39.9493, 116.3975),

new GLatLng(39.9593, 116.4071)

], "#ff0000", 10);

map.addOverlay(polyline);

分享到：

利用jquery 使 iframe 高度自适应 | Map、List、Set的简洁初始化

2013-04-15 17:30
浏览 909
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

谷歌地图简单入门

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

谷歌地图 简单入门

评论

发表评论

相关推荐

最近访客更多访客>>

谷歌地图简单入门