Google地图标注(带搜索功能)
首先引入GOOGLE MAP的JS文件
<script type="text/javascript" src="http://ditu.google.com/maps?file=api&v=3"></script>
以下为源代码
String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, "");
};
String.prototype.empty = function() {
return this.trim() == "";
};
String.prototype.format = function() {
var args = arguments;
return this.replace(/\{(\d+)\}/g, function(m, i) {
return args[i];
});
};
Array.prototype.indexOf = function(v) {
for (var i = 0; i < this.length; i++) {
if (v == this[i]) {
return i;
}
}
return -1;
};
var GoogleMap = function(obj) {
this.Latitude = obj.Latitude || 116.407413;
this.Longtitude = obj.Longtitude || 39.904214;
this.Width = obj.Width || 400;
this.Height = obj.Height || 300;
this.Html = obj.Html || null;
this.AllowSearch = obj.Search || false;
this.Map = null;
this.Markers = [];
this.Container = obj.Container || null;
this.ScrollWheelZoom = obj.ScrollWheelZoom || false;
this.LargeMapControl = obj.LargeMapControl || false;
this.MapTypeControl = obj.MapTypeControl || false;
this.OverviewMap = obj.OverviewMap || false;
this.obj = null;
this.Width = this.Width <= 400 ? 400 : this.Width;
this.Height = this.Height <= 300 ? 300 : this.Height;
this.Id = obj.Id || 'google{0}'.format(Math.ceil(Math.random() * 10000));
this.Geocoder = null;
this.init();
};
GoogleMap.prototype = {
addEvent: function(o, a, b) {
o.attachEvent ? o.attachEvent('on' + a, function() {
b.call(o)
}) : o.addEventListener(a, b, false)
},
loadMap: function() {
var $ = this;
if ($.Map) return;
if (!$.obj.innerHTML.empty()) return;
var o = document.createElement('div');
o.style.cssText = 'width:{0}px;height:{1}px;border:1px solid #a5bfdd'.format($.Width, $.Height);
$.obj.appendChild(o);
$.Map = new GMap(o);
var myCenter = new GPoint($.Latitude, $.Longtitude);
$.Map.centerAndZoom(myCenter, 8);
//创建带有可在四个方向平移、放大、缩小的按钮，以及缩放滑块的控件。
if ($.LargeMapControl) $.Map.addControl(new GLargeMapControl());
//创建带有切换地图类型的按钮的控件。GMapTypeControl
if ($.MapTypeControl) $.Map.addControl(new GMenuMapTypeControl());
if ($.OverviewMap) $.Map.addControl(new GOverviewMapControl());
//设置地图支持滚轮
if ($.ScrollWheelZoom) $.Map.enableScrollWheelZoom();
},
icon: function() {
var c = new GIcon();
c.image = "http://maps.google.com/mapfiles/ms/micons/red-dot.png";
c.shadow = "http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png";
c.iconSize = new GSize(32, 32);
c.shadowSize = new GSize(37, 34);
c.iconAnchor = new GPoint(9, 34);
c.infoWindowAnchor = new GPoint(9, 2);
c.infoShadowAnchor = new GPoint(18, 25);
return c;
},
createMarker: function(html, show, latitude, longtitude) {
var $ = this;
var ico = $.icon();
var point = new GPoint(longtitude, latitude);
var marker = new GMarker(point, ico);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
$.Map.addOverlay(marker);
if (show) marker.openInfoWindowHtml(html);
return marker;
},
init: function() {
var $ = this;
if (!$.Container) {
alert('容器不存在！');
return;
}
var o = document.getElementById($.Container);
if (!o) {
alert('容器不存在！');
return;
}
$.obj = o;
$.iconOr = GoogleMap.icon = $.icon();
$.loadMap();
$.createMarker($.Html, true, $.Latitude, $.Longtitude);
o.parentNode.style.width = $.Width + 'px';
if ($.AllowSearch) {
$.Geocoder = new GClientGeocoder();
var s = document.createElement('p');
o.appendChild(s);
var k = document.createElement('input');
k.setAttribute('type', 'text');
k.style.cssText = 'border:1px solid #a5bfdd;width:{0}px;height:16px;margin-top:10px'.format($.Width - 50);
var d = document.createElement('input');
d.setAttribute('type', 'button');
d.style.cssText = 'border:1px solid #a5bfdd;width:40px;float:right;height:20px;margin-top:10px;cursor:pointer;background:#b1d5ff';
d.value = '搜索';
var r = document.createElement('p');
r.style.cssText = 'margin-top:10px';
r.setAttribute('id', 'search{0}'.format($.Id));
o.appendChild(r);
s.appendChild(d);
s.appendChild(k);
$.result = r;
d.onclick = function() {
if (k.value.empty()) {
alert('请输入关键字！');
return;
}
$.Geocoder.getLocations(k.value.trim(), function(result) {
if (result.Status.code != G_GEO_SUCCESS) return; ;
var icon = new GIcon(G_DEFAULT_ICON);
var lat, lng, point, address, marker;
for (var i = 0; i < result.Placemark.length; i++) {
lat = result.Placemark[i].Point.coordinates[1]; // lat
lng = result.Placemark[i].Point.coordinates[0]; // lng
address = result.Placemark[i].address; // 地址
point = new GLatLng(lat, lng);
point = point.toString().replace('(', '').replace(')', '');
r.innerHTML = (address + " <small>" + point.toString() + "</small><br />");
var myCenter = new GPoint(lat, lng);
$.Map.centerAndZoom(myCenter, 8);
$.createMarker(address.replace(/,/g, '<br />'), false, lat, lng);
var lati = document.getElementById('Latitude');
var lont = document.getElementById('Longtitude');
if (lati) lati.value = lat;
if (lont) lont.value = lng;
}
})
};
}
}
}
使用方法
var map = new GoogleMap({
//地图宽度
Width: 600,
//地图高度
Height: 500,
//纬度
Latitude: 42.648486,
//经度
Longtitude: -71.134868,
//是否带搜索
Search: true,
//地图支持滚轮
ScrollWheelZoom: true,
//带有可在四个方向平移、放大、缩小的按钮，以及缩放滑块的控件
LargeMapControl: true,
//带有切换地图类型的按钮的控件
MapTypeControl: true,
//右下角小地图
OverviewMap:true,
//标注的HTML
Html: 'Phillips Academy Andover',
//地图容器ID
Container: 'xx'
});
多个标注
map.createMarker('North Reading', false, 42.5750833, -71.0854325);
map.createMarker('xxx Reading', false, 42.5750833, -71.2854325);
HTML
经度:<input id="Latitude" type="text" /> 纬度:<input id="Longtitude" type="text" />
<div id="xx"></div>
这是我一个项目中专用的需求.非通用.欢迎拍砖
本文为原创,虽然是垃圾代码,转载时请注明出处.谢谢
