|
|
復制代碼 代碼如下:
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("對不起，您的瀏覽器不支持創建地圖！");
}
}
})();
JavaScript技術：Google Map API更新實現用戶自定義標注坐標，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
