演示地址：http://www.yaohaixiao.com/effects/google-map.html
复制代码 代码如下:
if(typeof googlemap === 'undefined'){
var googlemap = {};
}
(function(){
if (!document.getelementbyid(fgmap)) {
return false;
}
else {
// 是否可创建google地图控件
var iscompatible = new gbrowseriscompatible();
if (iscompatible) {
var mapcontainer = document.getelementbyid(fgmap);
// 创建googlemap地图实例
var map = new gmap2(mapcontainer);
// 地图默认的比例尺级别
var perviewlevel = 14;
// 大的地图缩放级别控件
var largemapcontrol = new glargemapcontrol();
// 地图缩略图控件
var overviewmapcontrol = new goverviewmapcontrol();
// 比例尺控件
var scalecontrol = new gscalecontrol();
// 地图类形选择控件
var maptypecontrol = new gmaptypecontrol();
// 地址-坐标转换器
var geocoder = new gclientgeocoder();
// 上一次的查询地址
var lastaddress = '';
// 上一次的查询坐标
var lastpoint = null;
// 最后一个创建的标记控件
var lastmarker = null;
// 用户标记的最后一个坐标点
var cuslastpoint = null;
googlemap.mapmsg = [];
// 创建地图
googlemap.map = function(lat, lng){
var point = new glatlng(lat, lng);
map.addmaptype(g_physical_map);
map.setcenter(point, perviewlevel);
map.enabledoubleclickzoom();
map.enablescrollwheelzoom();
map.enablecontinuouszoom();
map.addcontrol(largemapcontrol)
map.addcontrol(overviewmapcontrol);
map.addcontrol(maptypecontrol);
map.addcontrol(scalecontrol);
};
// 创建标记
googlemap.createmarker = function(latlng, markeroptions){
var marker = markeroptions ? new gmarker(latlng, markeroptions) : new gmarker(latlng);
lastmarker = marker;
return marker;
};
// 自定义标记选项
/* =========================================================================================================================================================================================
参数说明：
常数：g_default_icon 标记使用的默认图标。
image string 图标的前景图像 url。
shadow string 图标的阴影图像 url。
iconsize gsize 图标前景图像的像素大小。
shadowsize gsize 阴影图像的像素大小。
iconanchor gpoint 此图标在地图上的锚定点相对于图标图像左上角的像素坐标。
infowindowanchor gpoint 信息窗口在此图标上的锚定点相对于图标图像左上角的像素坐标。
printimage string 打印地图所用的前景图标图像的 url。其大小必须与 image 提供的主图标图像的大小相同。
mozprintimage string 用 firefox/mozilla 打印地图时所用的前景图标图像的 url。其大小必须与 image 提供的主图标图像的大小相同。
printshadow string 打印地图时所用的阴影图像的 url。由于大多数浏览器都无法打印 png 图像，所以图像格式应该为 gif。
transparent string 在 internet explorer 中捕获点击事件时，所用的透明前景图标图像的 url。此图像应是具有 1% 不透明性的 24 位 png 格式的主图标图像，但其大小和形状同主图标相同。
imagemap array of number 表示图像地图 x/y 坐标的整数数组，用它指定浏览器（非 internet explorer）中图标图像的可点击部分。
maxheight integer 指定拖动标记时视觉上垂直“上升”的距离（以像素表示）。（自 2.79 开始）
dragcrossimage string 指定拖动图标时十字交叉图像的 url。（自 2.79 开始）
dragcrosssize gsize 指定拖动图标时十字交叉图像的像素大小。（自 2.79 开始）
dragcrossanchor gpoint 指定拖动图标时十字交叉图像的像素坐标偏移量（相对于 iconanchor）。（自 2.79 开始）
========================================================================================================================================================================================= */
googlemap.setcustomicon = function(iconoptions){
var myicon = new gicon(g_default_icon), i;
for (i in iconoptions) {
switch (i) {
case 'iconsize':
case 'shadowsize':
case 'dragcrosssize':
myicon[i] = new gsize(iconoptions[i][0], iconoptions[i][1]);
break;
case 'iconanchor':
case 'infowindowanchor':
case 'infoshadowanchor':
case 'dragcrossanchor':
myicon.iconanchor = new gpoint(iconoptions[i][0], iconoptions[i][1]);
break;
default:
myicon[i] = iconoptions[i];
break;
}
}
return myicon;
};
// 用户自定义标注
googlemap.custommarkpoint = function(){
var marker = null;
var markpoint = cuslastpoint ? new glatlng(cuslastpoint[0],cuslastpoint[1]) : new glatlng(lastpoint[0],lastpoint[1]);
var markoptions = {
icon: googlemap.setcustomicon({
image: 'http://www.yaohaixiao.com/effects/img/icon13.png'
}),
draggable: true
};
marker = googlemap.createmarker(markpoint, markoptions);
gevent.addlistener(marker, dragstart, function(){
map.closeinfowindow();
});
gevent.addlistener(marker, dragend, function(){
var custpoint = marker.getpoint();
var marktip = '';
marktip += '用户地图标注';
marktip += '当前经纬度：(' + custpoint.lat() + ',' + custpoint.lng() + ')
';
marktip += '是否将新位置设置为此商户的默认位置？
';
marktip += 'marker.openinfowindowhtml(marktip);
});
map.addoverlay(marker);
};
// 保存用户自定义坐标
googlemap.mapok = function(){
var savedpoint = lastmarker.getpoint();
var lat = savedpoint.lat(), lng = savedpoint.lng();
var marktip = document.getelementbyid('cusmarktip');
marktip.innerhtml = '正在上传您所保存的坐标信息...';
if (timer) {
cleartimeout(timer);
}
var timer = settimeout(function(){
map.clearoverlays();
var marker = googlemap.createmarker(savedpoint);
if (googlemap.mapmsg) {
gevent.addlistener(marker, click, function(){
var msg = '', j;
msg += '' + googlemap.mapmsg[1][0] + '';
for (var j = 1; j msg += googlemap.mapmsg[1][j] +
;
}
msg += ;
map.openinfowindowhtml(savedpoint, msg);
});
}
map.addoverlay(marker);
map.setcenter(savedpoint);
cuslastpoint = [lat,lng];
}, 2000);
};
// 取消用户自定义坐标操作
googlemap.mapcancel = function(){
map.removeoverlay(lastmarker);
map.closeinfowindow();
};
// 通过地址获得坐标
googlemap.getaddresslatlng = function(response){
var place = response.placemark[0];
var point = new glatlng(place.point.coordinates[1], place.point.coordinates[0]);
return [place.point.coordinates[1], place.point.coordinates[0], point, place];
};
// 标注坐标和相应的说明信息
googlemap.markermap = function(lat, lng){
var marker = null;
var point = new glatlng(lat, lng);
googlemap.map(lat, lng);
marker = this.createmarker(point);
if (googlemap.mapmsg) {
gevent.addlistener(marker, click, function(){
var msg = '', j;
msg += '' + googlemap.mapmsg[1][0] + '';
for (var j = 1; j msg += googlemap.mapmsg[1][j] +
;
}
msg += ;
map.openinfowindowhtml(point, msg);
});
}
map.addoverlay(marker);
};
// 将查询地址添加到地图
googlemap.addaddresstomap = function(response){
map.clearoverlays();
if (!response || response.status.code != 200) {
alert(对不起, 我们解析不到该地址的经纬度坐标！);
}
else {
var marker = null, point = googlemap.getaddresslatlng(response);
var address = point[3].address, lat = point[0], lng = point[1];
googlemap.mapmsg = (googlemap.mapmsg !== '' && (lastaddress === googlemap.mapmsg[0])) ? googlemap.mapmsg : [address, [point[3].address, ('经度：' + point[1]), ('纬度：' + point[0])]];
googlemap.markermap(lat, lng);
lastpoint = [lat,lng];
}
};
// 将查询坐标添加到地图
googlemap.addpointtomap = function(cpoint){
map.clearoverlays();
var marker = null, lat = cpoint[0], lng = cpoint[1];
googlemap.markermap(lat, lng);
lastpoint = [lat,lng];
};
// 通过地址/坐标将marker显示到地图上
googlemap.showlocation = function(cpoint){
if (typeof cpoint === 'string') {
geocoder.getlocations(cpoint, this.addaddresstomap);
lastaddress = cpoint;
}
else{
googlemap.addpointtomap(cpoint);
}
};
gevent.addlistener(window, 'unload', gunload);
}
else {
alert(对不起，您的浏览器不支持创建地图！);
}
}
})();