Google地图标注(带搜索功能)
首先引入GOOGLE MAP的JS文件
<script type="text/javascript" src="http://ditu.google.com/maps?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 id="Latitude" type="text" /> 纬度:<input id="Longtitude" type="text" />
<div id="xx"></div>
