第一种效果：可搜索，可以计算
代码：
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>
第六种 数据库型 可随意添加！
