唐山网站建设

设为主页 加入收藏 繁體中文

Google Maps API 用法教程

核心提示:在过往的1年中,在线舆图的发展是相当巨大,我们可以看到在线舆图的极有价值的信息和其能力。这其中,最着名望的自然是Google Maps。. Google Maps由1个相当强大的开发引擎并也有1个很大的社区提示支持。

在过往的1年中,在线舆图的发展是相当巨大,我们可以看到在线舆图的极有价值的信息和其能力。这其中,最着名望的自然是Google Maps。. Google Maps由1个相当强大的开发引擎并也有1个很大的社区提示支持。

Google 答应各种web masters 通过Google Maps API来增加或自定义他们站点特定的舆图,你可能从这里取得Google API key 。1个舆图 API key只对1个“目录”或域有效。key绑定了你的域名,你要在网站上放舆图,需要有对应的key,否则拒尽读取舆图数据,在本地测试可以不用key。固然,你可以申请多个API key。

创建1个简单的舆图

在你的站点上引进Google Maps 是1件很简单的事情,你只需要加进:

* 引进Google的JavaScript 文件

* 设置JavaScript 1些参数

* 1个你需要显示舆图的HTML layer

Google的Javascript文件引进:

1.

留意: 我们可以改变语言,比如说,把“hl=en” 改成中文“hl=zh-CN” 。我们还得要把“API_KEY” 改成我们向Google申请来的那个。

说明: 使用 UTF⑻ 编码会更好些。

1 2 3 4 5 下1页

核心提示:在过往的1年中,在线舆图的发展是相当巨大,我们可以看到在线舆图的极有价值的信息和其能力。这其中,最着名望的自然是Google Maps。. Google Maps由1个相当强大的开发引擎并也有1个很大的社区提示支持。

设置舆图参数:

这是你可定制有个性化的Google Maps的地方。我们可以增加1些参数来改变舆图的样式。例如,我们可以设置舆图的载进和显示的坐标。下面是相干的代码:

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.}

请留意上面高亮的那1条语句,第1个是纬度坐标和第2个是经度坐标,“13” 表示舆图缩放的程度,这个值可以取1 到17。

要知道所在地点的纬度和经度,你可使用这个工具,这个工具很轻易使用,只需要把舆图移到你想要的区域,然后,把鼠标放在中心便可以够了。
舆图标记

你可以在舆图上放上1个标记来标出1个特定的位置,下面是1个示例代码。

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.}

上面的示例把我们的舆图的中心放在了希腊雅典,标记了雅典卫城。

上1页 1 2 3 4 5 下1页

核心提示:在过往的1年中,在线舆图的发展是相当巨大,我们可以看到在线舆图的极有价值的信息和其能力。这其中,最着名望的自然是Google Maps。. Google Maps由1个相当强大的开发引擎并也有1个很大的社区提示支持。

气球提示

气球提示1个很不错的界面,他可以用于放置1些小提示或或是1些信息。例如,下面的代码将放置1个在雅典卫城山上放1个气球提示来显示1些信息:

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.}

活动标记

我们可以合并1些标记和蔼球提示来创建1个活动标记,这样1来,我们可以到达这样的效果——当用户点击某个标记的时候才会显示提示。代码以下所示:

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下上面的代码。下面的部份是在标记下增加1个阴影:

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标签来指定1个ID,这样才能被JavaScript使用,在我们的示例中,我们使用“map_canvas”。我们也能使用CSS来渲染这个DIV层。

上1页 1 2 3 4 5 下1页

核心提示:在过往的1年中,在线舆图的发展是相当巨大,我们可以看到在线舆图的极有价值的信息和其能力。这其中,最着名望的自然是Google Maps。. Google Maps由1个相当强大的开发引擎并也有1个很大的社区提示支持。

定制舆图:

你可使用自定义的标记和阴影。有两个工具可以帮助你创建这些图标—— 舆图标记 和 阴影。你也能够使用HTML和CSS来定义气球提示。
加进多个标记并分组

我们可以标记多个地点,并可以把它们根据我们的需要分组。这样1来,我们可以通过不同的标记图标来显示地点的不同属性,比如:酒店,车站等。要做到这样,我们只需要使用1个XML文件,1个简单的XML文件以下所示:

01.
02.03. name="标题"
04. label="这是1个标签"
05. desc="气球提示的描写"
06. lat="37.97167" lng="23.72581"
07. type="标签的种类,如 Bridge"
08. address="地址信息"
09. icona="图标"
10./>
11.

你可以在这个XML文件中加进多个地点信息。有1件事你需要谨慎的是,当出现逐1些特定字符时(比如单引号,双引号,“#@$<>”等),你需要使用HTML的转义。

使用这XML的脚本以下:

1.

固然,你需要设置1些参数:

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(⑹, ⑻)})
22.};

要分组标记,你需要下面的代码:

1. markerGroups[type].push(marker);
2. var html = "

"+ name + "
" +
3. desc + "
Address: " + address + "

";
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,我们也应当需要不同的色采和图标。

上1页 1 2 3 4 5 下1页

核心提示:在过往的1年中,在线舆图的发展是相当巨大,我们可以看到在线舆图的极有价值的信息和其能力。这其中,最着名望的自然是Google Maps。. Google Maps由1个相当强大的开发引擎并也有1个很大的社区提示支持。

过滤显示标记

我们还可让我们的标记更友好1些。我们可让用户决定是否是显示标记,这样的话,舆图上的标记就不会太多,也会根据用户的需求来显示相当的标记。我们可使用几个按钮,复选框,或是链接来完成这个事情。要做到这个事,你需要在“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.}

最后1件事是加如几个checkbox :

1.
2.
3.

我们 Google Maps 停当了,这篇文章讲述了Google Map API中你应当知道的。希看这篇文章对你有帮助。

上1页 1 2 3 4 5 唐山网站建设www.fw8.net
TAG:提示,代码,在线,舆图,标记
评论加载中...
内容:
评论者: 验证码: