Google Map API更新實現使用者自訂標註座標

示範地址：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 = '<div class="fgmap_markerMsg" id="cusMarkTip">';
markTip += '<h4>使用者地表徵圖注</h4>';
markTip += '<div id="mapTips"><p>當前經緯度：(' + custPoint.lat() + ',' + custPoint.lng() + ')<br />';
markTip += '是否將新位置設定為此商戶的預設位置？</p>';
markTip += '<div class="MDB" style="text-align:center;"><button id="MapOK" ';
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 = '<h4>正在上傳您所儲存的座標資訊...</h4>';
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 = '<span class="fgmap_markerMsg">', j;
msg += '<h4>' + GoogleMap.mapMsg[1][0] + '</h4>';
for (var j = 1; j < GoogleMap.mapMsg[1].length; j++) {
msg += GoogleMap.mapMsg[1][j] + "<br />";
}
msg += "</span>";
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 = '<span class="fgmap_markerMsg">', j;
msg += '<h4>' + GoogleMap.mapMsg[1][0] + '</h4>';
for (var j = 1; j < GoogleMap.mapMsg[1].length; j++) {
msg += GoogleMap.mapMsg[1][j] + "<br />";
}
msg += "</span>";
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("對不起，您的瀏覽器不支援建立地圖！");
}
}
})();