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.2. charset="UTF⑻" 3. src=http://maps.google.com/maps?file=api&v=2&hl=en&oe=utf⑻&key=API_KEY 4. type="text/javascript"> 5. |
留意: 我们可以改变语言,比如说,把“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. 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.netTAG:提示,代码,在线,舆图,标记
评论加载中...
|