在过去的一年中,在线地图的发展是相当巨大,我们可以看到在线地图的极有价值的信息和其能力。这其中,最有名气的自然是Google Maps。. Google Maps由一个相当强大的开发引擎并也有一个很大的社区提示支持。
Google 允许各种web masters 通过Google Maps API来增加或自定义他们站点特定的地图,你可能从这里取得Google API key 。一个地图 API key只对一个“目录”或域有效。key绑定了你的域名,你要在网站上放地图,需要有对应的key,否则拒绝读取地图数据,在本地测试可以不用key。当然,你可以申请多个API key。
创建一个简单的地图
在你的站点上引入Google Maps 是一件很简单的事情,你只需要加入:
- 引入Google的JavaScript 文件
- 设置JavaScript 一些参数
- 一个你需要显示地图的HTML layer
Google的Javascript文件引入:
1.
<script
2.
charset=
"UTF-8"
3.
src=http:
4.
type=
"text/javascript"
>
5.
</script>
注意: 我们可以改变语言,比如说,把“hl=en” 改成中文“hl=zh-CN” 。我们还得要把“API_KEY” 改成我们向Google申请来的那个。
说明:使用 UTF-8 编码会更好些。
设置地图参数:
这是你可定制有个性化的Google Maps的地方。我们可以增加一些参数来改变地图的样式。例如,我们可以设置地图的载入和显示的坐标。下面是相关的代码:
1.
function
initialize() {
2.
if
(GBrowserIsCompatible()) {
3.
var
map =
new
GMap2(document.getElementById(
"map_canvas"
));
4.
map.setCenter(
new
GLatLng(37.97918, 23.71665), 13);
5.
map.setUIToDefault();
6.
}
7.
}
请注意上面高亮的那一条语句,第一个是纬度坐标和第二个是经度坐标,“13” 表示地图缩放的程度,这个值可以取1 到17。
要知道所在地点的纬度和经度,你可以使用这个工具,这个工具很容易使用,只需要把地图移到你想要的区域,然后,把鼠标放在中心就可以了。
地图标记
你可以在地图上放上一个标记来标出一个特定的位置,下面是一个示例代码。
1.
var
point =
new
GLatLng(37.97110, 23.72601);
2.
map.addOverlay(
new
GMarker(point));
于是,我们整个代码看起来是下面这个样子:
01.
function
initialize() {
02.
if
(GBrowserIsCompatible()) {
03.
var
map =
new
GMap2(document.getElementById(
"map_canvas"
));
04.
map.setCenter(
new
GLatLng(37.97918, 23.71665), 13);
05.
var
point =
new
GLatLng(37.97110, 23.72601);
06.
map.addOverlay(
new
GMarker(point));
07.
map.setUIToDefault();
08.
}
09.
}
上面的示例把我们的地图的中心放在了希腊雅典,标记了雅典卫城。
气球提示
气球提示一个很不错的界面,他可以用于放置一些小提示或或是一些信息。例如,下面的代码将放置一个在雅典卫城山上放一个气球提示来显示一些信息:
01.
function
initialize() {
02.
if
(GBrowserIsCompatible()) {
03.
var
map =
new
GMap2(document.getElementById(
"map_canvas"
));
04.
map.setCenter(
new
GLatLng(37.97110, 23.72601), 13);
05.
var
html =
"Parthenon 帕台农神庙, 地址: Acropolis Hill"
;
06.
map.openInfoWindow(map.getCenter(),
07.
document.createTextNode(html));
08.
map.setUIToDefault();
09.
}
10.
}
活动标记
我们可以合并一些标记和气球提示来创建一个活动标记,这样一来,我们可以达到这样的效果——当用户点击某个标记的时候才会显示提示。代码如下所示:
01.
function
initialize() {
02.
if
(GBrowserIsCompatible()) {
03.
var
map =
new
GMap2(document.getElementById(
"map_canvas"
));
04.
map.setCenter(
new
GLatLng(37.97918, 23.71665), 13);
05.
var
baseIcon =
new
GIcon(G_DEFAULT_ICON);
07.
baseIcon.iconSize =
new
GSize(20, 34);
08.
baseIcon.shadowSize =
new
GSize(37, 34);
09.
baseIcon.iconAnchor =
new
GPoint(9, 34);
10.
baseIcon.infoWindowAnchor =
new
GPoint(9, 2);
11.
12.
function
createMarker(point, index) {
13.
var
redIcon =
new
GIcon(baseIcon);
15.
markerOptions = { icon:redIcon };
16.
var
marker =
new
GMarker(point, markerOptions);
17.
GEvent.addListener(marker,
"click"
,
function
() {
18.
marker.openInfoWindowHtml(
"Parthenon, Address: Acropolis Hill"
);
19.
});
20.
return
marker;
21.
}
22.
23.
var
latlng =
new
GLatLng(37.97110, 23.72601);
24.
map.addOverlay(createMarker(latlng));
25.
}
26.
}
让我来梳理一下上面的代码。下面的部分是在标记下增加一个阴影:
1.
var
baseIcon =
new
GIcon(G_DEFAULT_ICON);
3.
baseIcon.iconSize =
new
GSize(20, 34);
4.
baseIcon.shadowSize =
new
GSize(37, 34);
5.
baseIcon.iconAnchor =
new
GPoint(9, 34);
6.
baseIcon.infoWindowAnchor =
new
GPoint(9, 2);
标记的Action是在这里设置的:
01.
function
createMarker(point, index) {
02.
var
redIcon =
new
GIcon(baseIcon);
04.
markerOptions = { icon:redIcon };
05.
var
marker =
new
GMarker(point, markerOptions);
06.
GEvent.addListener(marker,
"click"
,
function
() {
07.
marker.openInfoWindowHtml(
"Parthenon, Address: Acropolis Hill"
);
08.
});
09.
return
marker;
10.
}
这里是我们的标记的坐标:
1.
var
latlng =
new
GLatLng(37.97110, 23.72601);
2.
map.addOverlay(createMarker(latlng));
载入地图
我们可以通过两种方法载入地图。我们可以让地图在整网页载入时载入(通过使用body的load事件),也可以把载入过程赋给其它事件。下面的两个方法是我们需要注意的:
-
initialize() 载入地图
-
GUnload() 卸载地图以释放内存
我们当然还需要使用HTML的DIV标签来指定一个ID,这样才能被JavaScript使用,在我们的示例中,我们使用“map_canvas”。我们也能使用CSS来渲染这个DIV层。
定制地图
你可以使用自定义的标记和阴影。有两个工具可以帮助你创建这些图标—— 地图标记和 阴影。你也可以使用HTML和CSS来定义气球提示。
加入多个标记并分组
我们可以标记多个地点,并可以把它们根据我们的需要分组。这样一来,我们可以通过不同的标记图标来显示地点的不同属性,比如:酒店,车站等。要做到这样,我们只需要使用一个XML文件,一个简单的XML文件如下所示:
01.
<
markers
>
02.
<
marker
03.
name
=
"标题"
04.
label
=
"这是一个标签"
05.
desc
=
"气球提示的描述"
06.
lat
=
"37.97167"
lng
=
"23.72581"
07.
type
=
"标签的种类,如 Bridge"
08.
address
=
"地址信息"
09.
icona
=
"图标"
10.
/>
11.
</
markers
>
你可以在这个XML文件中加入多个地点信息。有一件事你需要小心的是,当出现一一些特定字符时(比如单引号,双引号,“#@$<>”等),你需要使用HTML的转义。
使用这XML的脚本如下:
当然,你需要设置一些参数:
01.
var
iconRed =
new
GIcon();
02.
iconRed.image =
'../img/marker-red.png'
;
03.
iconRed.shadow =
''
;
04.
iconRed.iconSize =
new
GSize(32, 32);
05.
iconRed.shadowSize =
new
GSize(22, 20);
06.
iconRed.iconAnchor =
new
GPoint(16, 16);
07.
iconRed.infoWindowAnchor =
new
GPoint(5, 1);
08.
var
customIcons = [];
09.
10.
customIcons[
"ancient"
] = iconRed;
11.
var
markerGroups = {
"ancient"
: []};
上面,我们给customIcons 的“ancient”属性设置成了iconRed ,于是我们应该在我们的XML文件中使用类型(ancient) ,如果我们把这个XML文件命名为: markers.xml,那么,我们的代码如下:
01.
GDownloadUrl(
"markers.xml"
,
function
(data) {
02.
var
xml = GXml.parse(data);
03.
var
markers = xml.documentElement.getElementsByTagName(
"marker"
);
04.
for
(
var
i = 0; i < markers.length; i++) {
05.
var
name = markers[i].getAttribute(
"name"
);
06.
var
label = markers[i].getAttribute(
"label"
);
07.
var
desc = markers[i].getAttribute(
"desc"
);
08.
var
address = markers[i].getAttribute(
"address"
);
09.
var
type = markers[i].getAttribute(
"type"
);
10.
var
icona = markers[i].getAttribute(
"icona"
);
11.
var
point =
new
GlatLng(parseFloat(markers[i].getAttribute(
"lat"
)),
12.
parseFloat(markers[i].getAttribute(
"lng"
)));
13.
var
marker = createMarker(point, name, label, desc, address, type, icona);
14.
map.addOverlay(marker);
15.
}
16.
});
17.
}
18.
}
19.
20.
function
createMarker(point, name, label, desc, address, type, icona) {
21.
var
marker =
new
LabeledMarker(point, {icon: customIcons[type], labelText: label, labelOffset:
new
GSize(-6, -8)})
22.
};
要分组标记,你需要下面的代码:
1.
markerGroups[type].push(marker);
2.
var
html =
"<img src="
+ icona +
" height=150 border=0 /><br><br><span><b>"
+ name +
"</b><br/>"
+
3.
desc +
"<br/><b>Address:</b> "
+ address +
"<br/><br/><span>"
;
4.
GEvent.addListener(marker,
'click'
,
function
() {
5.
marker.openInfoWindowHtml(html);
6.
});
7.
return
marker;
8.
}
要使用不同的图标,你可以使用相同的方法。
01.
var
iconRed =
new
GIcon();
02.
iconRed.image =
'../img/marker-red.png'
;
03.
iconRed.shadow =
''
;
04.
iconRed.iconSize =
new
GSize(32, 32);
05.
iconRed.shadowSize =
new
GSize(22, 20);
06.
iconRed.iconAnchor =
new
GPoint(16, 16);
07.
iconRed.infoWindowAnchor =
new
GPoint(5, 1);
08.
09.
var
iconGreen =
new
GIcon();
10.
iconGreen.image =
'../img/marker-green.png'
;
11.
iconGreen.shadow =
''
;
12.
iconGreen.iconSize =
new
GSize(32, 32);
13.
iconGreen.shadowSize =
new
GSize(22, 20);
14.
iconGreen.iconAnchor =
new
GPoint(16, 16);
15.
iconGreen.infoWindowAnchor =
new
GPoint(5, 1);
16.
17.
var
iconBrown =
new
GIcon();
18.
iconBrown.image =
'../img/marker-brown.png'
;
19.
iconBrown.shadow =
''
;
20.
iconBrown.iconSize =
new
GSize(32, 32);
21.
iconBrown.shadowSize =
new
GSize(22, 20);
22.
iconBrown.iconAnchor =
new
GPoint(16, 16);
23.
iconBrown.infoWindowAnchor =
new
GPoint(5, 1);
24.
25.
var
customIcons = [];
26.
27.
customIcons[
"hotel"
] = iconRed;
28.
customIcons[
"bridge"
] = iconGreen;
29.
customIcons[
"hill"
] = iconBrown;
30.
var
markerGroups = {
"hotel"
: [],
"bridge"
: [],
"hill"
: []};
所以,如果我们在XML 文件中设置了不同的种类,如:hotel,bridge和 hill,我们也应该需要不同的颜色和图标。
过滤显示标记
我们还可以让我们的标记更友好一些。我们可以让用户决定是否显示标记,这样的话,地图上的标记就不会太多,也会根据用户的需求来显示相当的标记。我们可以使用几个按钮,复选框,或是链接来完成这个事情。要做到这个事,你需要在“map.addMapType(G_SATELLITE_3D_MAP); ”后面加入下面的代码:
1.
document.getElementById(
"hotelCheckbox"
).checked =
true
;
2.
document.getElementById(
"bridgeCheckbox"
).checked =
true
;
3.
document.getElementById(
"hillCheckbox"
).checked =
true
;
4.
document.getElementById(
"labelsCheckbox"
).checked =
true
;
然后再加入下面的这些JavaScript 的代码:
01.
function
toggleGroup(type) {
02.
for
(
var
i = 0; i < markerGroups[type].length; i++) {
03.
var
marker = markerGroups[type][i];
04.
if
(marker.isHidden()) {
05.
marker.show();
06.
}
else
{
07.
marker.hide();
08.
}
09.
}
10.
}
11.
12.
function
toggleLabels() {
13.
var
showLabels = document.getElementById(
"labelsCheckbox"
).checked;
14.
for
(groupName
in
markerGroups) {
15.
for
(
var
i = 0; i < markerGroups[groupName].length; i++) {
16.
var
marker = markerGroups[groupName][i];
17.
marker.setLabelVisibility(showLabels);
18.
}
19.
}
20.
}
21.
22.
function
<
分享到:
相关推荐
Google Maps API 用法教程 Google Maps API 用法教程 Google Maps API 用法教程 Google Maps API 用法教程 Google Maps API 用法教程 Google Maps API 用法教程
GoogleMaps API V3离线下载工具及使用.zip 主要对其地图的下载,及自我编制。 离线下完全可以使用,只需先进行地图的下载。 添加了控件,离线下可进行操作。。。
│ │ └─7.1.3 在不同URL地址下使用Google Maps API │ ├─7.2 挖掘Google Maps API中未公开的功能 │ │ ├─7.2.1 为Google地图添加鸟瞰地图 │ │ ├─7.2.2 最大化GInfoWindow信息窗口 │ │ └─7.2.3 设定...
Kindle资源,Google Maps API开发大全。可使用Kindle PC端的软件阅读。
第1章~第7章讲解Google Maps API的使用。内容包括环境配置、IP可视化查询、 地图天气预报服务、Google Maps API高级应用等,以及相关实例。第8章~第18章讲解Google Earth API的使用。内容从Google Earth 客户端的...
基本功能及使用 – 目前版本:GMap2 – HelloWorld程序,Maps控件,事件处理,信息窗口,层,点、折线以及多 边型等 • 高级功能简介 – 异步HTTP通讯:GXmlHttp, GDownloadUrl – 创建自己的控件:控件子类化 – ...
详细介绍Google Maps API的应用,光盘配有源代码示例和辅助工具
详细介绍了GOOGLE MAPS API V3版的详细功能,有利于使用者更了解GOOGLE MAPS API
先前上传的资料有编译错误,今天改进了一次好了。这个是目前新Google Maps API使用的最全的DEMO。
├─06 Google Maps API高级编程 │ ├─6.1 GPolyline折线对象和GPolygon多边形对象 │ │ ├─6.1.1 使用GPolyline折线对象 │ │ ├─6.1.2 使用GPolygon多边形对象 │ │ ├─6.1.4 使用GPolyline和GPolygon的...
Google maps api介绍Google地图的使用方式和调用方法。
第1章~第7章讲解Google Maps API的使用。内容包括环境配置、IP可视化查询、 地图天气预报服务、Google Maps API高级应用等,以及相关实例。第8章~第18章讲解Google Earth API的使用。内容从Google Earth 客户端的...
本文通过介绍Goosle Maps的功能、特点和C,oosle Maps API的使用方 法,探讨了Google Maps API在w曲地图服务中的应用,并以全球江河泥沙信息发布系统为例,介绍了基于Coogl,, Maps API的Web地图服务应用系统的开发...
教你使用Google Maps API doc格式 包含实例,很好的入门教程
这个是比较基本的GOOGLE MAPS API 开发样例代码,可以直接生成文件使用
Google Maps API v3离线开发包,带本地地图示例数据 需要特别说明的是: 1、本离线开发包内仅实现了功能离线,即js源码和部分控件图片的离线,地图仍然使用Google Tile。 2、从思路上讲,将Google Tile下载到本地...
使用 XSLT、KML 和 Google Maps API 在地图上覆盖数据
M4B Checker是合作伙伴和开发人员的理想之选,可帮助您在实现Google Geo产品(包括Google Maps JavaScript API v3,静态图像API和Google Maps Engine API)时提供有关常见观察点和陷阱的信息。开发人员不再需要通过...
一个老外(西班牙)编写的控件,封装了全部google maps api ,使用在DELPHI中使用谷歌地图变得非常简单 GMLib - Google Maps Library Send suggestions to gmlib@cadetill.com Supported Delphi version: Delphi 6...
第1章~第7章讲解Google Maps API的使用。内容包括环境配置、IP可视化查询、 地图天气预报服务、Google Maps API高级应用等,以及相关实例。第8章~第18章讲解Google Earth API的使用。内容从Google Earth 客户端的...