首先引入GOOGLE MAP的JS文件
<script type="text/javascript" src="?file=api&v=3"></script>
以下为源代码：
001 String.prototype.trim = function() {
002
return this.replace(/(^\s*)|(\s*$)/g, "");
003 };
004 String.prototype.empty = function() {
005
return this.trim() == "";
006 };
007 String.prototype.format = function() {
008
var args = arguments;
009
return this.replace(/\{(\d+)\}/g, function(m, i) {
010
return args[i];
011
});
012 };
013 Array.prototype.indexOf = function(v) {
014
for (var i = 0; i < this.length; i++) {
015
if (v == this[i]) {
016
return i;
017
}
018
}
019
return -1;
020 };
021 var GoogleMap = function(obj) {
022
this.Latitude = obj.Latitude || 116.407413;
023
this.Longtitude = obj.Longtitude || 39.904214;
024
this.Width = obj.Width || 400;
025
this.Height = obj.Height || 300;
026
this.Html = obj.Html || null;
027
this.AllowSearch = obj.Search || false;
028
this.Map = null;
029
this.Markers = [];
030
this.Container = obj.Container || null;
031
this.ScrollWheelZoom = obj.ScrollWheelZoom || false;
032
this.LargeMapControl = obj.LargeMapControl || false;
033
this.MapTypeControl = obj.MapTypeControl || false;
034
this.OverviewMap = obj.OverviewMap || false;
035
this.obj = null;
036
this.Width = this.Width <= 400 ? 400 : this.Width;
037
this.Height = this.Height <= 300 ? 300 : this.Height;
038
this.Id = obj.Id || \'google{0}\'.format(Math.ceil(Math.random() * 10000));
039
this.Geocoder = null;
040
this.init();
041
042 };
043 GoogleMap.prototype = {
044
addEvent: function(o, a, b) {
045
o.attachEvent ? o.attachEvent(\'on\' + a, function() {
046
b.call(o)
047
}) : o.addEventListener(a, b, false)
048
},
049
loadMap: function() {
050
var $ = this;
051
if ($.Map) return;
052
if (!$.obj.innerHTML.empty()) return;
053
var o = document.createElement(\'div\');
054
o.style.cssText = \'width:{0}px;height:{1}px;border:1px solid #a5bfdd\'.format($.Width, $.Height);
055
$.obj.appendChild(o);
056
$.Map = new GMap(o);
057
058
var myCenter = new GPoint($.Latitude, $.Longtitude);
059
$.Map.centerAndZoom(myCenter, 8);
060
//创建带有可在四个方向平移、放大、缩小的按钮，以及缩放滑块的控件。
061
if ($.LargeMapControl) $.Map.addControl(new GLargeMapControl());
062
//创建带有切换地图类型的按钮的控件。GMapTypeControl
063
if ($.MapTypeControl) $.Map.addControl(new GMenuMapTypeControl());
064
if ($.OverviewMap) $.Map.addControl(new GOverviewMapControl());
065
//设置地图支持滚轮
066
if ($.ScrollWheelZoom) $.Map.enableScrollWheelZoom();
067
},
068
icon: function() {
069
var c = new GIcon();
070
c.image = "http://maps.google.com/mapfiles/ms/micons/red-dot.png";
071
c.shadow = "http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png";
072
c.iconSize = new GSize(32, 32);
073
c.shadowSize = new GSize(37, 34);
074
c.iconAnchor = new GPoint(9, 34);
075
c.infoWindowAnchor = new GPoint(9, 2);
076
c.infoShadowAnchor = new GPoint(18, 25);
077
return c;
078
},
079
createMarker: function(html, show, latitude, longtitude) {
080
var $ = this;
081
var ico = $.icon();
082
var point = new GPoint(longtitude, latitude);
083
var marker = new GMarker(point, ico);
084
GEvent.addListener(marker, "click", function() {
085
marker.openInfoWindowHtml(html);
086
});
087
$.Map.addOverlay(marker);
088
if (show) marker.openInfoWindowHtml(html);
089
return marker;
090
},
091
init: function() {
092
var $ = this;
093
if (!$.Container) {
094
alert(\'容器不存在！\');
095
return;
096
}
097
var o = document.getElementById($.Container);
098
if (!o) {
099
alert(\'容器不存在！\');
100
return;
101
}
102
$.obj = o;
103
$.iconOr = GoogleMap.icon = $.icon();
104
$.loadMap();
105
$.createMarker($.Html, true, $.Latitude, $.Longtitude);
106
o.parentNode.style.width = $.Width + \'px\';
107
if ($.AllowSearch) {
108
$.Geocoder = new GClientGeocoder();
109
var s = document.createElement(\'p\');
110
o.appendChild(s);
111
var k = document.createElement(\'input\');
112
k.setAttribute(\'type\', \'text\');
113
k.style.cssText = \'border:1px solid #a5bfdd;width:{0}px;height:16px;margin-top:10px\'.format($.Width - 50);
114
var d = document.createElement(\'input\');
115
d.setAttribute(\'type\', \'button\');
116
d.style.cssText = \'border:1px solid #a5bfdd;width:40px;float:right;height:20px;margin-top:10px;cursor:pointer;background:#b1d5ff\';
117
d.value = \'搜索\';
118
var r = document.createElement(\'p\');
119
r.style.cssText = \'margin-top:10px\';
120
r.setAttribute(\'id\', \'search{0}\'.format($.Id));
121
o.appendChild(r);
122
s.appendChild(d);
123
s.appendChild(k);
124
$.result = r;
125
d.onclick = function() {
126
if (k.value.empty()) {
127
alert(\'请输入关键字！\');
128
return;
129
}
130
$.Geocoder.getLocations(k.value.trim(), function(result) {
131
if (result.Status.code != G_GEO_SUCCESS) return; ;
132
var icon = new GIcon(G_DEFAULT_ICON);
133
var lat, lng, point, address, marker;
134
for (var i = 0; i < result.Placemark.length; i++) {
135
lat = result.Placemark[i].Point.coordinates[1]; // lat
136
lng = result.Placemark[i].Point.coordinates[0]; // lng
137
address = result.Placemark[i].address; // 地址
138
point = new GLatLng(lat, lng);
139
point = point.toString().replace(\'(\', \'\').replace(\')\', \'\');
140
r.innerHTML = (address + " <small>" + point.toString() + "</small><br />");
141
var myCenter = new GPoint(lat, lng);
142
$.Map.centerAndZoom(myCenter, 8);
143
$.createMarker(address.replace(/,/g, \'<br />\'), false, lat, lng);
144
var lati = document.getElementById(\'Latitude\');
145
var lont = document.getElementById(\'Longtitude\');
146
if (lati) lati.value = lat;
147
if (lont) lont.value = lng;
148
}
149
})
150
};
151
}
152
}
153 }
使用方法
01 var map = new GoogleMap({
02
//地图宽度
03
Width: 600,
04
//地图高度
05
Height: 500,
06
//纬度
07
Latitude: 42.648486,
08
//经度
09
Longtitude: -71.134868,
10
//是否带搜索
11
Search: true,
12
//地图支持滚轮
13
ScrollWheelZoom: true,
14
//带有可在四个方向平移、放大、缩小的按钮，以及缩放滑块的控件
15
LargeMapControl: true,
16
//带有切换地图类型的按钮的控件
17
MapTypeControl: true,
18
//右下角小地图
19
OverviewMap:true,
20
//标注的HTML
21
Html: \'Phillips Academy Andover\',
22
//地图容器ID
23
Container: \'xx\'
24 });
多个标注
map.createMarker(\'North Reading\', false, 42.5750833, -71.0854325);
map.createMarker(\'xxx Reading\', false, 42.5750833, -71.2854325);
HTML
view sourceprint?
经度:<input type="text" /> 纬度:<input type="text" />
<div></div>