小小工程師

題外話，點部落改版了！！

以前的文章，格式都大亂了，我想這是改版的陣痛吧！

慣用的LiveWriter也不再支援了，這讓我思考是否要找別的空間了！

曾經寫信給維運公司，看是否有機會以志工身份參與改版，不過，石沈大海。

可惜！！！

 

今天的重點是：透過tinyMap來幫我們做到幾點事情。

其實，GoogleMap的API不是很難，但是，看到這個套件出現，我好驚艷。

他就像官網上寫的第一行話一樣：

一種丟棄 Google Maps API 手冊的概念！輕鬆在網頁建立 Google 地圖的 jQuery Plugin。

 

今天的目標：

1.建立地圖

2.建立一個marker

3.在地圖上點選就做一個marker

4.承上，做出marker時，輸出經緯度、地址（地址用原生Google API，因為目前沒找到支援的api）

 

<!--載入jQuery-->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!--載入tinyMap-->
<script src="http://app.essoduke.org/js/tinyMap/jquery.tinyMap-3.3.11.js"></script>
<!--載入GoogleApi-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>

套用css

<style>
  .map {
	width: 640px;
	height: 480px;
}
</style>

先放我們的Input出來

經度:<input type='text' name="tbxlng" id="tbxlng" value='121.564621925354' onchange="ChangeMarker()">
緯度:<input type='text' name="tbxlat" id="tbxlat" value='25.03354442783431'  onchange="ChangeMarker()">
<br/>
地址:<input type='text' name="tbxAddr" id="tbxAddr" style="width:300px">

<div class="map"></div>

接著，剩下的一口氣寫完吧！記得搭配官網API，就可以理解了。

<script>
var map = $(".map");

GetAddress($("#tbxlat").val(), $("#tbxlng").val());

map.tinyMap({
    'center': '台北市信義區台北101',
    'zoom'  : 14,
	'marker' :[{'addr': [$("#tbxlat").val(), $("#tbxlng").val()], 'text': $("#tbxAddr").val()},],
	'event': {
        'click': function (e) {
			map.tinyMap('clear');
			
			GetAddress(e.latLng.lat(), e.latLng.lng());
			
			$("#tbxlng").val(e.latLng.lng());
			$("#tbxlat").val(e.latLng.lat());
			
			map.tinyMap('panTo', [e.latLng.lat(), e.latLng.lng()]);
            map.tinyMap('modify', {				
                'marker': [
                    {
                        'addr': [e.latLng.lat(), e.latLng.lng()],
						'text': $("#tbxAddr").val()
                    }
                ]
            });
        }
    }
});

//在InputOnchange時，變更地圖
function ChangeMarker(){
	//移動地圖中心
	map.tinyMap('panTo',  [$("#tbxlat").val(), $("#tbxlng").val()]);
    //清除地圖上所有圖層
	map.tinyMap('clear');
	//取得地址
	GetAddress($("#tbxlat").val(), $("#tbxlng").val());
	//重新畫出marker
	map.tinyMap('modify', {
		'marker': [
			{
				'addr': [$("#tbxlat").val(), $("#tbxlng").val()], 
				'text': $("#tbxAddr").val()
			}
		]
	});
}

//透過經緯度回傳地址
function GetAddress(lat,lng)
{
    //建立Geocoder物件
	var geocoder = new google.maps.Geocoder();
    //宣告經緯度物
	var latlng = {lat: parseFloat(lat), lng: parseFloat(lng)};

	geocoder.geocode({
	  'latLng': latlng
	}, function(results, status) {
        
		if (status === google.maps.GeocoderStatus.OK) {
			if (results) {
				var addr = results[0].formatted_address;
				$("#tbxAddr").val(addr);
			}
		} else {
			alert("Reverse Geocoding failed because: " + status);
		}
	});
}
</script>

線上Demo網址：http://jsbin.com/viboqurayi/edit?html,output

沒想到第一次按下儲存，就跳出我沒權限操作，這是什麼道理。。。

 

20151205 更新：
非常感謝作者親自回覆這篇。
tinyMap目前更新版本至：3.3.13，有新的API：query

同時，本篇的範例作者也重構＆優化，線上範例