地图相关-CFANZ编程社区

第一种效果：可搜索，可以计算

代码：

Java代码

1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

3.<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 

4.<head> 

5.<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 

6.<title>Google 地图 JavaScript API 示例: 控件定位</title> 

7.<script src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=en" type="text/javascript"></script> 

8. 

9.<script type="text/javascript"> 

10. function initialize() { //地图初始化函数 

11. var map = new GMap2(document.getElementById("map_canvas"));//创建地图 

12. map.setCenter(new GLatLng(40.7142691,-74.0059729), 13); //区域 深度 

13. 

14. var point = new GLatLng(40.7142691, -74.0059729); //坐标 

15. map.addOverlay(new GMarker(point)); //增加标点 

16. map.openInfoWindow(map.getCenter(),document.createTextNode("Hello, world")); //增加提示框 

17. 

18. var topRight = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10));//取得右上10*10的中心点 

19. var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));//取得右下10*10的中心点 

20. 

21. map.addControl(new GSmallMapControl(), topRight); //增加控件 左上角放大缩小工具 

22. 

23. ///var smallMapControl = new GOverviewMapControl(); //创建右下缩略图 

24. map.addControl(smallMapControl, topRight); //增加控件 

25. 

26. } 

27. 

28. function vok2(){ //获取经纬度函数 

29. var address=document.getElementById('t').value; 

30. if (address=="") return "请输入要查询的地址"; 

31. var map = new GMap2(document.getElementById("map_canvas"));//创建地图 

32. var geocoder = new GClientGeocoder(); 

33. geocoder.getLatLng( 

34. address, 

35. function(point) { 

36. if (!point) { 

37. alert(address + " 无地址！"); 

38. } else { 

39. map.setCenter(point, 14); 

40. var marker = new GMarker(point); 

41. document.getElementById('v').innerHTML=point; 

42. map.addOverlay(marker); 

43. marker.openInfoWindowHtml(address); 

44. } 

45. } 

46. ); 

47. } 

48. 

49. function calDis(){//调用函数 

50. var lat1 = document.getElementById( "X1").value * 1; 

51. var lng1 = document.getElementById( "Y1").value * 1; 

52. var lat2 = document.getElementById( "X2").value * 1; 

53. var lng2 = document.getElementById( "Y2").value * 1; 

54. var dis = GetDistance(lat1, lng1, lat2, lng2); 

55. document.getElementById("ss").innerHTML ="2点距离是: "+ dis+" km"; 

56. } 

57. 

58. function rad(d)//函数中间调用 

59. { 

60. return d * Math.PI / 180.0; 

61. } 

62. 

63. function GetDistance( lat1, lng1, lat2, lng2)//获取公里数 

64. { 

65. if( ( Math.abs( lat1 ) > 90 ) ||( Math.abs( lat2 ) > 90 ) ){ 

66. return false; 

67. } 

68. if( ( Math.abs( lng1 ) > 180 ) ||( Math.abs( lng2 ) > 180 ) ){ 

69. return false; 

70. } 

71. var radLat1 = rad(lat1); 

72. var radLat2 = rad(lat2); 

73. var a = radLat1 - radLat2; 

74. var b = rad(lng1) - rad(lng2); 

75. var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + 

76. Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2))); 

77. s = s *6378.137 ;// EARTH_RADIUS; 

78. s = Math.round(s * 10000) / 10000; 

79. return s; 

80. } 

81.</script> 

82. 

83. 

84.</head> 

85.<body οnlοad="initialize()" οnunlοad="GUnload()"> 

86. <div id="map_canvas" style="width: 500px; height: 300px"></div> 

87. <div> 

88. <input name="t" type="text" id="t"/> 

89. <span οnclick="vok2();" style="cursor:pointer">[查询]</span> 

90. <span id="v"></span> 

91. </div> 

92. <br /><br /> 

93. <div > 

94. A:<input type="text" id="X1"/>-<input type="text" id="Y1"/><br /> 

95. B:<input type="text" id="X2"/>-<input type="text" id="Y2"/> 

96. <span οnclick="calDis();" style="cursor:pointer">[计算]</span> 

97. <span id="ss"></span> 

98. </div> 

99. 

100.</body> 

101.</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 

<head> 

<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 

<title>Google 地图 JavaScript API 示例: 控件定位</title> 

<script src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=en" type="text/javascript"></script> 


<script type="text/javascript"> 

 function initialize() { //地图初始化函数 

 var map = new GMap2(document.getElementById("map_canvas"));//创建地图 

 map.setCenter(new GLatLng(40.7142691,-74.0059729), 13); //区域 深度 


 var point = new GLatLng(40.7142691, -74.0059729); //坐标 

 map.addOverlay(new GMarker(point)); //增加标点 

 map.openInfoWindow(map.getCenter(),document.createTextNode("Hello, world")); //增加提示框 


 var topRight = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10));//取得右上10*10的中心点 

 var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));//取得右下10*10的中心点 


 map.addControl(new GSmallMapControl(), topRight); //增加控件 左上角放大缩小工具 


 ///var smallMapControl = new GOverviewMapControl(); //创建右下缩略图 

 map.addControl(smallMapControl, topRight); //增加控件 


 } 


 function vok2(){ //获取经纬度函数 

 var address=document.getElementById('t').value; 

 if (address=="") return "请输入要查询的地址"; 

 var map = new GMap2(document.getElementById("map_canvas"));//创建地图 

 var geocoder = new GClientGeocoder(); 

 geocoder.getLatLng( 

 address, 

 function(point) { 

 if (!point) { 

 alert(address + " 无地址！"); 

 } else { 

 map.setCenter(point, 14); 

 var marker = new GMarker(point); 

 document.getElementById('v').innerHTML=point; 

 map.addOverlay(marker); 

 marker.openInfoWindowHtml(address); 

 } 

 } 

 ); 

 } 


 function calDis(){//调用函数 

 var lat1 = document.getElementById( "X1").value * 1; 

 var lng1 = document.getElementById( "Y1").value * 1; 

 var lat2 = document.getElementById( "X2").value * 1; 

 var lng2 = document.getElementById( "Y2").value * 1; 

 var dis = GetDistance(lat1, lng1, lat2, lng2); 

 document.getElementById("ss").innerHTML ="2点距离是: "+ dis+" km"; 

 } 


 function rad(d)//函数中间调用 

 { 

 return d * Math.PI / 180.0; 

 } 


 function GetDistance( lat1, lng1, lat2, lng2)//获取公里数 

 { 

 if( ( Math.abs( lat1 ) > 90 ) ||( Math.abs( lat2 ) > 90 ) ){ 

 return false; 

 } 

 if( ( Math.abs( lng1 ) > 180 ) ||( Math.abs( lng2 ) > 180 ) ){ 

 return false; 

 } 

 var radLat1 = rad(lat1); 

 var radLat2 = rad(lat2); 

 var a = radLat1 - radLat2; 

 var b = rad(lng1) - rad(lng2); 

 var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + 

 Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2))); 

 s = s *6378.137 ;// EARTH_RADIUS; 

 s = Math.round(s * 10000) / 10000; 

 return s; 

 } 

</script> 



</head> 

<body οnlοad="initialize()" οnunlοad="GUnload()"> 

 <div id="map_canvas" style="width: 500px; height: 300px"></div> 

 <div> 

 <input name="t" type="text" id="t"/> 

 <span οnclick="vok2();" style="cursor:pointer">[查询]</span> 

 <span id="v"></span> 

 </div> 

 <br /><br /> 

 <div > 

 A:<input type="text" id="X1"/>-<input type="text" id="Y1"/><br /> 

 B:<input type="text" id="X2"/>-<input type="text" id="Y2"/> 

 <span οnclick="calDis();" style="cursor:pointer">[计算]</span> 

 <span id="ss"></span> 

 </div> 


</body> 

</html>

第二种，单个标记

Java代码

1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

2.<html xmlns="http://www.w3.org/1999/xhtml"> 

3.<head> 

4.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

5.<title>Google Maps API</title> 

6.<!-- Your own Google API key must be used this one will only work 

7. for this server and directory --> 

8.<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA69393o7mAW_7Z8yPE9mj1hT87Zy2LdSAMVK_IWP23IfaHiwArBSqoC1tfQ_nGVfHT7ZJ_ycmO7DjCQ" type="text/javascript"></script> 

9.<script type="text/javascript"> 

10.var address="14 Wall Street New York, NY 10010"; 

11.var zoom=15; 

12.window.onload = function initialize1() { 

13. if (GBrowserIsCompatible()) { 

14. map = new GMap2(document.getElementById("googlemap")); 

15. map.setCenter(new GLatLng(37.4419, -122.1419), zoom); 

16. map.addControl(new GSmallMapControl()); 

17. 

18. geocoder = new GClientGeocoder(); 

19. if (geocoder) { 

20. geocoder.getLatLng( 

21. address, 

22. function(point) { 

23. if (!point) { 

24. alert(address + " not found"); 

25. } else { 

26. map.setCenter(point, zoom); 

27. var marker = new GMarker(point); 

28. map.addOverlay(marker); 

29. GEvent.addListener(marker, "mouseover", function() { 

30. marker.openInfoWindowHtml("<div style='padding:0; margin:0 ; font-size:12px; height:10px; width:140px;'>" + address + "</div>"); 

31. } 

32. ); 

33. 

34. GEvent.addListener(marker, "mouseout", function() { 

35. marker.closeInfoWindow(); 

36. } 

37. ); 

38. } 

39. } 

40. ); 

41. } 

42. } 

43.} 

44. 

45.</script> 

46.</head> 

47.<body> 

48.<div id="googlemap" style="width:500px; height:300px;"></div> 

49.</body> 

50.</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<title>Google Maps API</title> 

<!-- Your own Google API key must be used this one will only work 

 for this server and directory --> 

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA69393o7mAW_7Z8yPE9mj1hT87Zy2LdSAMVK_IWP23IfaHiwArBSqoC1tfQ_nGVfHT7ZJ_ycmO7DjCQ" type="text/javascript"></script> 

<script type="text/javascript"> 

var address="14 Wall Street New York, NY 10010"; 

var zoom=15; 

window.onload = function initialize1() { 

 if (GBrowserIsCompatible()) { 

 map = new GMap2(document.getElementById("googlemap")); 

 map.setCenter(new GLatLng(37.4419, -122.1419), zoom); 

 map.addControl(new GSmallMapControl()); 


 geocoder = new GClientGeocoder(); 

 if (geocoder) { 

 geocoder.getLatLng( 

 address, 

 function(point) { 

 if (!point) { 

 alert(address + " not found"); 

 } else { 

 map.setCenter(point, zoom); 

 var marker = new GMarker(point); 

 map.addOverlay(marker); 

 GEvent.addListener(marker, "mouseover", function() { 

 marker.openInfoWindowHtml("<div style='padding:0; margin:0 ; font-size:12px; height:10px; width:140px;'>" + address + "</div>"); 

 } 

 ); 


 GEvent.addListener(marker, "mouseout", function() { 

 marker.closeInfoWindow(); 

 } 

 ); 

 } 

 } 

 ); 

 } 

 } 

} 


</script> 

</head> 

<body> 

<div id="googlemap" style="width:500px; height:300px;"></div> 

</body> 

</html>

1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

2.<html xmlns="http://www.w3.org/1999/xhtml"> 

3.<head> 

4.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

5.<title>Google Maps API</title> 

6.<!-- Your own Google API key must be used this one will only work 

7. for this server and directory --> 

8.<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA69393o7mAW_7Z8yPE9mj1hT87Zy2LdSAMVK_IWP23IfaHiwArBSqoC1tfQ_nGVfHT7ZJ_ycmO7DjCQ" type="text/javascript"></script> 

9.<script type="text/javascript"> 

10.var address="14 Wall Street New York, NY 10010"; 

11.var zoom=15; 

12.window.onload = function initialize1() { 

13. if (GBrowserIsCompatible()) { 

14. map = new GMap2(document.getElementById("googlemap")); 

15. map.setCenter(new GLatLng(37.4419, -122.1419), zoom); 

16. map.addControl(new GSmallMapControl()); 

17. 

18. geocoder = new GClientGeocoder(); 

19. if (geocoder) { 

20. geocoder.getLatLng( 

21. address, 

22. function(point) { 

23. if (!point) { 

24. alert(address + " not found"); 

25. } else { 

26. map.setCenter(point, zoom); 

27. var marker = new GMarker(point); 

28. map.addOverlay(marker); 

29. GEvent.addListener(marker, "mouseover", function() { 

30. marker.openInfoWindowHtml("<div style='padding:0; margin:0 ; font-size:12px; height:10px; width:140px;'>" + address + "</div>"); 

31. } 

32. ); 

33. 

34. GEvent.addListener(marker, "mouseout", function() { 

35. marker.closeInfoWindow(); 

36. } 

37. ); 

38. } 

39. } 

40. ); 

41. } 

42. } 

43.} 

44. 

45.</script> 

46.</head> 

47.<body> 

48.<div id="googlemap" style="width:500px; height:300px;"></div> 

49.</body> 

50.</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<title>Google Maps API</title> 

<!-- Your own Google API key must be used this one will only work 

 for this server and directory --> 

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA69393o7mAW_7Z8yPE9mj1hT87Zy2LdSAMVK_IWP23IfaHiwArBSqoC1tfQ_nGVfHT7ZJ_ycmO7DjCQ" type="text/javascript"></script> 

<script type="text/javascript"> 

var address="14 Wall Street New York, NY 10010"; 

var zoom=15; 

window.onload = function initialize1() { 

 if (GBrowserIsCompatible()) { 

 map = new GMap2(document.getElementById("googlemap")); 

 map.setCenter(new GLatLng(37.4419, -122.1419), zoom); 

 map.addControl(new GSmallMapControl()); 


 geocoder = new GClientGeocoder(); 

 if (geocoder) { 

 geocoder.getLatLng( 

 address, 

 function(point) { 

 if (!point) { 

 alert(address + " not found"); 

 } else { 

 map.setCenter(point, zoom); 

 var marker = new GMarker(point); 

 map.addOverlay(marker); 

 GEvent.addListener(marker, "mouseover", function() { 

 marker.openInfoWindowHtml("<div style='padding:0; margin:0 ; font-size:12px; height:10px; width:140px;'>" + address + "</div>"); 

 } 

 ); 


 GEvent.addListener(marker, "mouseout", function() { 

 marker.closeInfoWindow(); 

 } 

 ); 

 } 

 } 

 ); 

 } 

 } 

} 


</script> 

</head> 

<body> 

<div id="googlemap" style="width:500px; height:300px;"></div> 

</body> 

</html>

使用方法：

首先你要保证注册一个google map 免费的 key
http://code.google.com/intl/zh-CN/apis/maps/signup.html （中文）
http://code.google.com/intl/en/apis/maps/signup.html （英文）

之后你可以把上面的代码封装，那个address就是接口了，输入有效地址就可以显示位置。

第三种JSPlacemaker - 使用纯JavaScript提取地理数据

内容提取仍然是一个热门话题。不久之前Yahoo推出了一个新的Web服务-Placemaker ，新推出的开放式 API，可以帮助开发者将他们的应用程序和数据集地理位置感知化。

但是这个API只允许传值，而且不允许有XML或RSS输出。这也是我为什么会创建JS-Placemaker 的原因，这样 javaScript便可以通过Placemaker服务。你需要做的就是为Placemaker获取应用程序的ID。

JS- Placemaker是专门为Yahoo Placemaker web服务准备的一个JavaScript wrapper，使用YQL 执行表，让您随时提取地理位置的信息。

http://icant.co.uk/jsplacemaker/

第四种中国电子地图

中国电子地图服务商MapABC发布地图API V1.0 ，该版本具有如下特征：

1，对社区用户完全免费。

任何人都能通过网络申请成为地图API用户。

2，对技术人员友好。

全面支持Javascript调用，丰富的用户手册和官方BBS技术讨论区支持，提供全方位的技术支撑。中小网站站长和技术爱好者都能很快掌握API的使用方法。

3，强大的位置数据库支持。

4，对用户友好，展现层采用Flash 技术。

使电子地图更加流畅，动态效果更佳。

5，API除了提供地图操作外，还提供在线查询功能。

支持地理位置搜索、北京等大城市的实时交通查询。

6，支持地址匹配。

第五种 http://www.iteye.com/news/13813-web-geo

附录：

Google api http://code.google.com/apis/ajax/playground/

Html代码

1.<!-- 

2. copyright (c) 2009 Google inc. 

3. 

4. You are free to copy and use this sample. 

5. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license 

6.--> 

7. 

8.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

9.<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 

10. <head> 

11. <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 

12. <title>Google Maps API Sample</title> 

13. <style type="text/css"> 

14. @import url("http://www.google.com/uds/css/gsearch.css"); 

15. @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css"); 

16. </style> 

17. <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q" 

18. type="text/javascript"></script> 

19. <script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script> 

20. 

21. <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script> 

22. <script type="text/javascript"> 

23. 

24. function initialize() { 

25. if (GBrowserIsCompatible()) { 

26. 

27. // Create and Center a Map 

28. var map = new GMap2(document.getElementById("map_canvas")); 

29. map.setCenter(new GLatLng(37.4419, -122.1419), 13); 

30. map.addControl(new GLargeMapControl()); 

31. map.addControl(new GMapTypeControl()); 

32. 

33. // bind a search control to the map, suppress result list 

34. map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20))); 

35. } 

36. } 

37. GSearch.setOnLoadCallback(initialize); 

38. 

39. </script> 

40. </head> 

41. <body οnlοad="initialize()" οnunlοad="GUnload()" style="font-family: Arial;border: 0 none;"> 

42. <div id="map_canvas" style="width: 500px; height: 300px"></div> 

43. </body> 

44.</html> 

<!-- 

 copyright (c) 2009 Google inc. 


 You are free to copy and use this sample. 

 License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license 

--> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 

 <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 

 <title>Google Maps API Sample</title> 

 <style type="text/css"> 

 @import url("http://www.google.com/uds/css/gsearch.css"); 

 @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css"); 

 </style> 

 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q" 

 type="text/javascript"></script> 

 <script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script> 


 <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script> 

 <script type="text/javascript"> 


 function initialize() { 

 if (GBrowserIsCompatible()) { 


 // Create and Center a Map 

 var map = new GMap2(document.getElementById("map_canvas")); 

 map.setCenter(new GLatLng(37.4419, -122.1419), 13); 

 map.addControl(new GLargeMapControl()); 

 map.addControl(new GMapTypeControl()); 


 // bind a search control to the map, suppress result list 

 map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20))); 

 } 

 } 

 GSearch.setOnLoadCallback(initialize); 


 </script> 

 </head> 

 <body οnlοad="initialize()" οnunlοad="GUnload()" style="font-family: Arial;border: 0 none;"> 

 <div id="map_canvas" style="width: 500px; height: 300px"></div> 

 </body> 

</html>

第六种数据库型可随意添加！