Google地图API测试(测试gmap.js)

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Google地图API测试(测试gmap.js)相关的知识，希望对你有一定的参考价值。

This is test script of Google Map API.
How to use this script is as follows.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v:* {
behavior:url(#default#VML);
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=XXXXX" charset="UTF-8"></script>
<script type="text/javascript" src="http://xxxxx/testgmap.js" charset="UTF-8"></script>
<script>
window.onload = load;
window.unload = GUnload;
</script>
</head>
<body>
<table border=1><tr><td><div id="map" style="width: 700px; height: 600px"></div>
<div id="gmessage"></div></td><td>
<a href="javascript:moveMap()">Test 1</a><br />
</td></tr></table>
</body>
  1. // Main
  2. function load() {
  3. 	// Check compatibility
  4. 	if (GBrowserIsCompatible()) {
  5. 		gmap2 = new GMap2(document.getElementById("map"));
  6. 		gmap2.setCenter(new GLatLng(37.4419, -122.1419), 13);
  7.  
  8. 		// Adding controls to the map
  9. 		gmap2.addControl(new GLargeMapControl());
  10. 		gmap2.addControl(new GMapTypeControl());
  11.  
  12. 		// Register an event listener to display the latitude and longitude
  13. 		GEvent.addListener(gmap2, "moveend", function() {
  14. 			var center = gmap2.getCenter();
  15. 			document.getElementById("gmessage").innerHTML = center.toString();
  16. 		});
  17. 	} else {
  18. 		var map = document.getElementById("map");
  19. 		map.innerHTML = "You cannot use this browser.<br />";
  20. 	}
  21. }
  22.  
  23. // Move map
  24. function moveMap() {
  25. 	window.setTimeout(
  26. 		function() { gmap2.panTo(new GLatLng(37.4569, -122.1569)); },
  27. 		1000
  28. 	);
  29. }
  30.  
  31. // Opening an info window
  32. function displayInfoWindow() {
  33. 	gmap2.openInfoWindow(gmap2.getCenter(), document.createTextNode("Hello, world"));
  34. }
  35.  
  36. // Opening an info window with HTML
  37. function displayInfoWindowHtml() {
  38. 	var msg = "<div style='width:250px'><a href='http://www.yahoo.com/'><b>Yahoo!.com</b></a></div>";
  39. 	gmap2.openInfoWindowHtml(gmap2.getCenter(), msg);
  40. }
  41.  
  42. // Displays a polyline
  43. // you must include the VML namespace and CSS in your HTML document
  44. // to view polylines in IE.
  45. function mapOverlaysPolyline() {
  46. 	var points = [];
  47. 	points.push(new GLatLng(37.4219, -122.1119));
  48. 	points.push(new GLatLng(37.4419, -122.1619));
  49. 	points.push(new GLatLng(37.4719, -122.1319));
  50. 	gmap2.addOverlay(new GPolyline(points, '#000000', 5, 0.7));
  51. }
  52.  
  53. // Creating icon
  54. function mapOverlaysIcon() {
  55. 	var icon = new GIcon();
  56. 	icon.image = "http://xoops.ikinuku.com/images/gmap/yazirusi.png";
  57. 	icon.shadow = "http://xoops.ikinuku.com/images/gmap/shadow.png";
  58. 	icon.iconSize = new GSize(20, 34);
  59. 	icon.shadowSize = new GSize(37, 34);
  60. 	icon.iconAnchor = new GPoint(20, 34);
  61.  
  62. 	var marker = new GMarker(gmap2.getCenter(), icon);
  63. 	gmap2.addOverlay(marker);
  64. }
  65.  
  66. // Creating icon which are always shown at center of the map
  67. function mapOverlaysCrossIcon() {
  68. 	var icon = new GIcon();
  69. 	icon.image = "http://xoops.ikinuku.com/images/gmap/cross.png";
  70. 	icon.iconSize = new GSize(100, 100);
  71. 	icon.iconAnchor = new GPoint(50, 50);
  72.  
  73. 	var marker = new GMarker(gmap2.getCenter(), icon);
  74. 	gmap2.addOverlay(marker);
  75.  
  76. 	GEvent.addListener(gmap2, "move", function() {
  77. 		gmap2.clearOverlays();
  78. 		marker = new GMarker(gmap2.getCenter(), icon);
  79. 		gmap2.addOverlay(marker);
  80. 	});
  81. }
  82.  
  83. // Display info windows above marker
  84. // This uses simple api to show a thumbnail of web page.
  85. function mapOverlaysMarker1() {
  86. 	var point = new GLatLng(37.4285, -122.1293);
  87. 	var marker = new GMarker(point);
  88. 	gmap2.addOverlay(marker);
  89.  
  90. 	var html = '<div style="width:300px"><a href="http://blog.ikinuku.com/">'
  91. 			+ '<img src="http://img.simpleapi.net/small/http://blog.ikinuku.com/"'
  92. 			+ ' alt="" width="128" height="128" hspace="4" vspace="4" align="left" border="0"></a><br />'
  93. 			+ '<a href="http://blog.ikinuku.com/"><b>My Blog</b></a></div>';
  94. 	GEvent.addListener(marker, "click", function() {
  95. 		marker.openInfoWindowHtml(html);
  96. 	});
  97. }
  98.  
  99. // Display tabbed info windows Above marker
  100. function mapOverlaysMarker2withTab() {
  101. 	var point = new GLatLng(37.4348, -122.1568);
  102. 	var marker = new GMarker(point);
  103. 	gmap2.addOverlay(marker);
  104.  
  105. 	var img = new Image();
  106. 	img.src = 'http://xoops.ikinuku.com/images/gmap/daibutu01.gif';
  107.  
  108. 	var html = '<div style="width:300px"><img src="' + img.src + '" align="left"/>'
  109. 			+ '<b>[[Display image test]]</b><br />'
  110. 			+ 'Sample image<br />'
  111. 			+ 'Big Buddha</div>';
  112.  
  113. 	var infoTabs = [
  114. 		new GInfoWindowTab("Tab 1", html),
  115. 		new GInfoWindowTab("Tab 2", "Tab test")
  116. 	];
  117.  
  118. 	GEvent.addListener(marker, "click", function() {
  119. 		marker.openInfoWindowTabsHtml(infoTabs);
  120. 	});
  121. }
  122.  
  123. // Display info windows with music link above markers
  124. function mapOverlaysMarker3withPodcast() {
  125. 	var point = new GLatLng(37.4356, -122.1380);
  126. 	var marker = new GMarker(point);
  127. 	gmap2.addOverlay(marker);
  128.  
  129. 	var html = '<div style="width:300px"><a href="http://mt.ikinuku.com/podcast/test.mp3">Test music</a></div>';
  130. 	GEvent.addListener(marker, "click", function() {
  131. 		marker.openInfoWindowHtml(html);
  132. 	});
  133. }
  134.  
  135. // Download a csv file by using GDownloadUrl class
  136. function downloadCsvCoordinateFile() {
  137. 	GDownloadUrl('http://xoops.ikinuku.com/misc/ajax/sample.csv', function(data, responseCode) {
  138. 		var rows = data.split('
');
  139. 		for (var i = 0; i < rows.length; i++) {
  140. 			var lat = rows[i].split(',')[0];
  141. 			var lon = rows[i].split(',')[1];
  142. 			var point = new GLatLng(lat, lon);
  143. 			var marker = new GMarker(point);
  144. 			gmap2.addOverlay(marker);
  145.  
  146. 			var music = rows[i].split(',')[2];
  147. 			var title = rows[i].split(',')[3];
  148. 			createInfoWindow(marker, music, title);
  149. 		}
  150. 	});
  151. }
  152.  
  153. // Click handling
  154. function mapOverlaysMarkerShowHide() {
  155. 	GEvent.addListener(gmap2, "click", function(overlay, point) {
  156. 		if (overlay) {
  157. 			gmap2.removeOverlay(overlay);
  158. 		} else {
  159. 			gmap2.addOverlay(new GMarker(point));
  160. 		}
  161. 	});
  162. }
  163.  
  164. // Clear all overlays
  165. function clearOverlays() {
  166. 	gmap2.clearOverlays();
  167. 	GEvent.clearListeners(gmap2, "click");
  168. 	GEvent.clearListeners(gmap2, "move");
  169. }

以上是关于Google地图API测试(测试gmap.js)的主要内容，如果未能解决你的问题，请参考以下文章

应用程序在实现 Google 地图 API 的活动中崩溃

在 Rails 中使用 Capybara 和 Selenium 测试 Google 地图标记

Google Maps API v3和fusion图层：获取行数据

html5应用 调用百度地图API 为啥在手机端显示不了，求大神解!!!!!!

地理地图和“国家名称”

如何隐藏或显示 Google 地图图层？