Google Maps API用法教程
来源:互联网 发布:网络自动备份软件 编辑:程序博客网 时间:2024/06/03 04:41
Google Maps API用法教程
在过去的一年中,在线地图的发展是相当巨大,我们可以看到在线地图的极有价值的信息和其能力。这其中,最有名气的自然是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:
//maps.google.com/maps?file=api&v=2&hl=en&oe=utf-8&key=API_KEY
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));
于是,我们整个代码看起来是下面这个样子:
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
var
point =
new
GLatLng(37.97110, 23.72601);
6
map.addOverlay(
new
GMarker(point));
7
map.setUIToDefault();
8
}
9
}
上面的示例把我们的地图的中心放在了希腊雅典,标记了雅典卫城。
气球提示
气球提示一个很不错的界面,他可以用于放置一些小提示或或是一些信息。例如,下面的代码将放置一个在雅典卫城山上放一个气球提示来显示一些信息:
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);
06
baseIcon.shadow =
"http://www.google.com/mapfiles/shadow50.png"
;
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);
14
redIcon.image =
"http://www.google.com/mapfiles/marker.png"
;
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);
2
baseIcon.shadow =
"http://www.google.com/mapfiles/shadow50.png"
;
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);
03
redIcon.image =
"http://www.google.com/mapfiles/marker.png"
;
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的脚本如下:
1
<script src=
"http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/src/labeledmarker.js"
type=
"text/javascript"
></script>
当然,你需要设置一些参数:
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) {
//We tell Google Maps to load our file
02
var
xml = GXml.parse(data);
03
var
markers = xml.documentElement.getElementsByTagName(
"marker"
);
//and read markers
04
for
(
var
i = 0; i < markers.length; i++) {
05
var
name = markers[i].getAttribute(
"name"
);
//From here down we assign variables.
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"
)),
//and we set the lat-long
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
hideAll() {
23
var
boxes = document.getElementsByName(
"mark"
);
24
for
(
var
i = 0; i < boxes.length; i++) {
25
if
(boxes[i].checked) {
26
boxes[i].checked =
false
;
27
switchLayer(
false
, layers[i].obj);
28
chosen.push(i);
29
}
30
}
31
}
32
33
function
checkChecked() {
34
var
boxes = document.getElementsByName(
"mark"
);
35
for
(
var
i = 0; i < boxes.length; i++) {
36
if
(boxes[i].checked)
return
true
;
37
}
38
return
false
;
39
}
最后一件事是加如几个checkbox :
1
<
input
type
=
"hidden"
id
=
"labelsCheckbox"
onclick
=
"toggleLabels()"
checked=”checked” />
2
<
label
for=”hotelCheckbox”>Hotels</
label
><
input
type
=
"checkbox"
id
=
"hotelCheckbox"
onclick
=
"toggleGroup('hotel')"
checked=”checked” />
3
<
label
for=”bridgeCheckbox”>Bridges</
label
><
input
type
=
"checkbox"
id
=
"bridgeCheckbox"
onclick
=
"toggleGroup('bridge')"
checked=”checked” />
我们 Google Maps 就绪了,这篇文章讲述了Google Map API中你应该知道的。希望这篇文章对你有帮助。
- Google Maps API用法教程
- Google Maps API用法教程
- Google Maps API用法教程
- Google Maps API用法教程 .
- Google Maps API简易教程
- Google Maps API 说明
- Google Maps API
- 学习 Google Maps API
- google maps api
- google maps api 应用
- Google Maps API V3
- Google Static Maps API
- Google Maps API 网络服务
- Google Maps API例子
- Google Maps API licensing
- Google maps API开发
- google maps api 地址
- Google maps API开发
- 使用maven创建多模块web项目
- 一些明白
- 前后,后台获取路径问题
- Upload class
- AIX5.3上装python3.1.1
- Google Maps API用法教程
- SSH和SSL比较
- Sending variables into a SWF file
- 《蜗居》简评
- jQuery 弹出层实例
- C#委托与事件
- linux分区
- C中的scanf不等待输入的原因及解决办法
- linux so动态库调用例子