Horn Network

這是另一種標籤加文字的方式。 覆寫 GOverlay 的 ELabel^#1。
本文同時示範如何計算兩點間的距離。

計算距離

distanceFrom

// 計算某一點距離台北火車站多遠
function distanceFrom(latlng) {
	var TS = new GLatLng(25.048708,121.516128); // 台北火車站
	var dist=TS.distanceFrom(latlng); // 距離
	dist=dist.toFixed(0)+"m"; // 公尺
	if(parseInt(dist)>10000) {
		// 若大於10公里則顯示為公里
		dist=(parseInt(dist)/1000).toFixed(1)+"km";
	}
	return dist;
}

程式碼

執行範例

ELabel

// http://koti.mbnet.fi/ojalesa/exam/elabel.js
// Version 0.2      the .copy() parameters were wrong
// version 1.0      added .show() .hide() .setContents() .setPoint() .setOpacity() .overlap
function ELabel(point, html, classname, pixelOffset, percentOpacity, overlap) {
	// Mandatory parameters
	this.point = point;
	this.html = html;

	// Optional parameters
	this.classname = classname||"";
	this.pixelOffset = pixelOffset||new GSize(0,0);
	if (percentOpacity) {
	  if(percentOpacity<0){percentOpacity=0;}
	  if(percentOpacity>100){percentOpacity=100;}
	}
	this.percentOpacity = percentOpacity;
	this.overlap=overlap||false;
} 

ELabel.prototype = new GOverlay();

ELabel.prototype.initialize = function(map) {
	var div = document.createElement("div");
	div.style.position = "absolute";
	div.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
	map.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(div);
	this.map_ = map;
	this.div_ = div;
	if (this.percentOpacity) {
	  if(typeof(div.style.filter)=='string')
		{div.style.filter='alpha(opacity:'+this.percentOpacity+')';}
	  if(typeof(div.style.KHTMLOpacity)=='string')
		{div.style.KHTMLOpacity=this.percentOpacity/100;}
	  if(typeof(div.style.MozOpacity)=='string')
		{div.style.MozOpacity=this.percentOpacity/100;}
	  if(typeof(div.style.opacity)=='string')
		{div.style.opacity=this.percentOpacity/100;}
	}
	if (this.overlap) {
	  var z = GOverlay.getZIndex(this.point.lat());
	  this.div_.style.zIndex = z;
	}
}

ELabel.prototype.remove = function() {
	this.div_.parentNode.removeChild(this.div_);
}

ELabel.prototype.copy = function() {
	return new ELabel(this.point, this.html, this.classname,
	this.pixelOffset, this.percentOpacity, this.overlap);
}

ELabel.prototype.redraw = function(force) {
	var p = this.map_.fromLatLngToDivPixel(this.point);
	var h = parseInt(this.div_.clientHeight);
	this.div_.style.left = (p.x + this.pixelOffset.width) + "px";
	this.div_.style.top = (p.y +this.pixelOffset.height - h) + "px";
}

ELabel.prototype.show = function() {
	this.div_.style.display="";
}

ELabel.prototype.hide = function() {
	this.div_.style.display="none";
}

ELabel.prototype.setContents = function(html) {
	this.html = html;
	this.div_.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
	this.redraw(true);
}

ELabel.prototype.setPoint = function(point) {
	this.point = point;
	if (this.overlap) {
	  var z = GOverlay.getZIndex(this.point.lat());
	  this.div_.style.zIndex = z;
	}
	this.redraw(true);
}

ELabel.prototype.setOpacity = function(percentOpacity) {
	if (percentOpacity) {
	  if(percentOpacity<0){percentOpacity=0;}
	  if(percentOpacity>100){percentOpacity=100;}
	}
	this.percentOpacity = percentOpacity;
	if (this.percentOpacity) {
	  if(typeof(this.div_.style.filter)=='string')
		{this.div_.style.filter='alpha(opacity:'+this.percentOpacity+')';}
	  if(typeof(this.div_.style.KHTMLOpacity)=='string')
		{this.div_.style.KHTMLOpacity=this.percentOpacity/100;}
	  if(typeof(this.div_.style.MozOpacity)=='string')
		{this.div_.style.MozOpacity=this.percentOpacity/100;}
	  if(typeof(this.div_.style.opacity)=='string')
		{this.div_.style.opacity=this.percentOpacity/100;}
	}
}

javascript

google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;

function initialize() {
	// 檢查瀏覽器是否可使用 Google Map API
	if ( GBrowserIsCompatible() ) {
        map = new google.maps.Map2(document.getElementById('map'));
		map.setMapType(G_SATELLITE_MAP);
		// 設定地圖中心點
		map.setCenter(new GLatLng(25.036772,121.520269), 12);

addSite(map,12,'中山',25.062361,121.526194);
addSite(map,13,'萬華',25.030000,121.490556);
addSite(map,14,'古亭',25.020833,121.528611);

	} // if
	else {
		alert('您的瀏覽器不支援Google Map');
	} // else
}

function addSite(map, siteCode, siteDesc, lat, lng) {
	var latlng = new GLatLng(lat,lng);
	var mark = new GMarker(latlng,{title:siteDesc,draggable:true});
	map.addOverlay(mark);

	// point, html, classname, pixelOffset, percentOpacity, overlap
	var label = new ELabel(latlng, siteDesc+"(draggable)","labelstyle",new GSize(2,20),80);
	map.addOverlay(label);

	GEvent.addListener(mark,"drag",function(){
		label.setPoint(mark.getPoint());

		var TS = new GLatLng(25.048708,121.516128);
		var dist=TS.distanceFrom(mark.getPoint());
		dist=dist.toFixed(0)+"m";
		if(parseInt(dist)>10000){dist=(parseInt(dist)/1000).toFixed(1)+"km";}
		label.setContents(siteDesc+"("+dist+")");
	});
}

參考資料：

1. Esa’s Google Maps API examples

Filed under:
Google Map by klcintw