kyle'sBlog: 9月 2013

2013年9月6日星期五

使用POST取得JSON資料

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head><title></title>
	<!--JQUERY UI-->
	<script type="text/javascript" src="http://web.systemlead.com/bufferorderweb/scripts/jquery-2.0.1.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script type="text/javascript">
	$(function () {
	ShowMenu();
	});
	//顯示菜單
	function ShowMenu() {
	var TRANSDT = '2013-09-07';
	var BOSTORE_NO = '30001000'
	jQuery.ajax({
	url: 'http://web.systemlead.com/bufferorderweb/OrderProcess.aspx/ShowMenu',
	type: 'post',
	contentType: "application/json; charset=utf-8",
	data: '{"BOSTORE_NO":"' + BOSTORE_NO + '","TRANSDT":"' + TRANSDT + '"}',
	dataType: 'json',
	success: BindMenuItem,
	error: function () {
	alert("error");
	}

	});

	}
	function BindMenuItem(response) {
	//alert(response.d);
	var rList = $.parseJSON(response.d);
	var tmp = "";
	$.each(rList, function (i, item) {
	//alert(item.aVAILABLE_QTYField);
	var str1 = "";
	if ((item.aVAILABLE_QTYField).toString() != "0") {
	str1 = "<input type='button' class='add' />"
	+ "<input type='text' placeholder='0' class='align-center' value='0' onkeypress='TextBoxNumCheck_Int();' "
	+ "id='txt" + item.mEALNOField + "' alt='" + item.mEAL_PRICEField + "'>"
	+ "<input type='button' class='less' />"
	+ "<span class='checkNumber'>數量：0</span>";
	}
	else {
	str1 = "<button class='info disabled center'>已售完</button>";
	}
	tmp = tmp + "<div alt='dishesList _" + item.cAEGORY_NOField + "' id='" + "divMEALKIND" + item.mEALKINDField + "'>"
	+ "<h2>" + item.mEALNAField + "</h2>"
	+ "<span class='roll' title='" + item.dESCTXTField + "'></span>"
	+ "<img src='http://web.systemlead.com/bufferorderweb/show_image.ashx?W=190&H=220&FID=" + item.fIDField + "' "
	+ "alt='" + item.mEALNOField + "' title='" + item.dESCTXTField + "' "
	+ "id='img" + item.mEALNOField + "' />"
	+ "$" + item.mEAL_PRICEField + "元 <span>每日供應" + item.dATE_LIMITField + "份</span>"
	+ "<div class='dishesMenu'>"
	+ str1
	+ "</div></div>";
	});
	$("#rptMain").children().remove();
	$("#rptMain").append(tmp);
	}

	</script>
	</head>
	<body>
	<form>
	<div id='rptMain'></div>
	</form>
	</body>
	</html>

view raw getJson.html hosted with ❤ by GitHub

WebMethod

	/// <summary>
	/// 繫結菜單
	/// </summary>
	[System.Web.Services.WebMethod]
	public static string ShowMenu(string BOSTORE_NO, string TRANSDT)
	{
	DateTime dt = Convert.ToDateTime(TRANSDT);
	List<BOSMEAL> result = BOSMEAL_SelectDailyMenu(BOSTORE_NO, dt).ToList<BOSMEAL>();
	return JsonUtility.ToString<List<BOSMEAL>>(result);
	}

view raw ShowMenu.cs hosted with ❤ by GitHub

Google Map API - 地圖標點

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta charset="utf-8" />
	<title>遞送清單 </title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
	<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css"
	rel="stylesheet" />
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=zh-TW"></script>
	<script type="text/javascript" src="http://web.systemlead.com/EasyCartAdmin/Scripts/ELabels3.js"></script>
	<style type="text/css">
	.site
	{
	border: solid 1px #000000;
	padding-left: 1em;
	display: block;
	width: 60px;
	cursor: pointer;
	margin: 5px;
	}
	div.markerLabel
	{ /markerLabeldisplay: block;/
	text-align: center; /background-color:white;/ /border:1px;/
	width: 32px;
	letter-spacing: 0px;
	font-size: 16px;
	font-family: Arial;
	color: white;
	}
	</style>
	<script type="text/javascript">
	//<![CDATA[
	var geocoder;
	var map = null;
	function initialize() {
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(22.6253654, 120.36345639999993);
	map = new google.maps.Map(document.getElementById('map-canvas'), {
	zoom: 13,
	center: latlng, //new google.maps.LatLng(25.036772, 121.520269), // 設定地圖中心點
	mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID,ROADMAP,SATELLITE,TERRAIN
	});
	map.setOptions({ draggable: false,
	// zoomControl: false,
	scrollwheel: false,
	// disableDoubleClickZoom: true,
	// streetViewControl: false,//街景
	// scaleControl: false,//縮放
	// panControl: false //平移功能
	disableDefaultUI: true
	});

	//顯示中心點
	ShowCenterPoint();
	//顯示外送點
	ShowPoint();

	}
	function ShowPoint() {
	try {
	$("[id*=address]").filter(function () {
	ShowPointByAddr($(this).val(), $(this).attr('alt'));
	});
	}
	catch (err)
	{ }
	}
	var arySite = new Array();

	function addSite(map, siteCode, siteDesc, lat, lng, address) {
	var pt = new google.maps.LatLng(lat, lng);

	var label = new ELabel(map,
	pt,
	'<div id="arrowCanvas" >' + siteDesc + '<\/div>',
	'markerLabel', // null
	new google.maps.Size(-15, 9)
	);
	label.setMap(map);


	// 讓圖的圓心在點上
	var icon = new google.maps.MarkerImage("http://web.systemlead.com/EasyCartAdmin/App_themes/Red/images/icons/red_circle.png",
	new google.maps.Size(32, 32), // 大小
	new google.maps.Point(0, 0), // 原點
	new google.maps.Point(16, 16) // anchor
	);
	var marker = new google.maps.Marker({
	map: map,
	position: pt,
	title: siteDesc,
	icon: icon
	});
	}
	function addSite2(map, siteCode, siteDesc, lat, lng, address) {
	var pt = new google.maps.LatLng(lat, lng);

	var label = new ELabel(map,
	pt,
	'<div id="arrowCanvas" >' + siteDesc + '<\/div>',
	'markerLabel', // null
	new google.maps.Size(-15, 9)
	);
	label.setMap(map);


	// 讓圖的圓心在點上
	var icon = new google.maps.MarkerImage("../../App_themes/Red/images/icons/home.png",
	new google.maps.Size(32, 32), // 大小
	new google.maps.Point(0, 0), // 原點
	new google.maps.Point(16, 16) // anchor
	);
	var marker = new google.maps.Marker({
	map: map,
	position: pt,
	title: siteDesc,
	icon: icon
	});
	}
	function ShowPointByAddr(address, orderid) {

	geocoder.geocode({ 'address': address }, function (results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	var x = results[0].geometry.location.lat();
	var y = results[0].geometry.location.lng();
	addSite(map, 4, orderid, x, y, address, 0, 0, '懸浮微粒', 0);
	} else {
	//alert("Geocode was not successful for the following reason: " + status);
	}
	});
	}
	function ShowCenterPoint() {
	var My_address = $("#txtHome").val();
	geocoder.geocode({ 'address': My_address }, function (results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	var latlng = results[0].geometry.location;
	map.setCenter(latlng);
	// var marker = new google.maps.Marker({
	// map: map,
	// position: latlng
	// });
	addSite2(map, 4, '', latlng.lat(), latlng.lng(), My_address, 0, 0, '懸浮微粒', 0);

	} else {
	//alert("Geocode was not successful for the following reason: " + status);
	}
	});
	}

	$(document).ready(function () { initialize(); });
	//]]>
	</script>
	</head>
	<body>
	<div class="mapTitle">
	<span id="lblTRAINDT">2013/08/03</span><label>
	遞送清單</label></div>
	<div id="map-canvas" style="width: 650px; height: 500px">
	</div>
	<div>
	<input name="txtHome" type="hidden" id="txtHome" value="高雄市三民區建武路15號" />
	<table class="mapList">
	<tr>
	<td>
	1
	<input id="address" style="width: 300px" type="hidden" value='高雄市三民區00' alt='1'>
	</td>
	<td>
	* 0 高雄市三民區00<br />
	<br />
	</td>
	<td>
	25元
	</td>
	</tr>
	<tr>
	<td>
	3
	<input id="address" style="width: 300px" type="hidden" value='高雄市苓雅區00' alt='3'>
	</td>
	<td>
	* 0 高雄市苓雅區00<br />
	1.玉米濃湯, 7 * 1 = 7<br />
	</td>
	<td>
	54元
	</td>
	</tr>
	<tr>
	<td>
	5
	<input id="address" style="width: 300px" type="hidden" value='高雄市苓雅區1' alt='5'>
	</td>
	<td>
	* 0 高雄市苓雅區1<br />
	<br />
	</td>
	<td>
	90元
	</td>
	</tr>
	<tr>
	<td>
	8
	<input id="address" style="width: 300px" type="hidden" value='高雄市三民區TEST' alt='8'>
	</td>
	<td>
	TEST TEST 高雄市三民區TEST<br />
	1.有機石蓮花纖果, 12 * 1 = 12<br />
	</td>
	<td>
	70元
	</td>
	</tr>
	<tr>
	<td>
	10
	<input id="address" style="width: 300px" type="hidden" value='高雄市三民區大順一路32號' alt='10'>
	</td>
	<td>
	莫須有 7190888 高雄市三民區大順一路32號<br />
	1.蕃茄炒蛋, 12 * 8 = 96\|2.玉米濃湯, 7 * 4 = 28\|3.皮蛋豆腐, 15 * 4 = 60\|4.頂級洛神仙楂烏梅汁, 15 * 2 =
	30\|5.有機石蓮花纖果, 12 * 2 = 24<br />
	</td>
	<td>
	391元
	</td>
	</tr>
	<tr>
	<td>
	14
	<input id="address" style="width: 300px" type="hidden" value='高雄市三民區和順街63-1號6F' alt='14'>
	</td>
	<td>
	李小龍 0987654321 高雄市三民區和順街63-1號6F<br />
	1.玉米濃湯, 7 * 2 = 14<br />
	</td>
	<td>
	57元
	</td>
	</tr>
	<tr>
	<td>
	15
	<input id="address" style="width: 300px" type="hidden" value='高雄市三民區建工路' alt='15'>
	</td>
	<td>
	鄭小 0755 高雄市三民區建工路<br />
	<br />
	</td>
	<td>
	52元
	</td>
	</tr>
	<tr>
	<td>
	16
	<input id="address" style="width: 300px" type="hidden" value='高雄市三民區建工路' alt='16'>
	</td>
	<td>
	沈 0912345789 高雄市三民區建工路<br />
	<br />
	</td>
	<td>
	45元
	</td>
	</tr>
	<tr>
	<td>
	17
	<input id="address" style="width: 300px" type="hidden" value='高雄市三民區建工路一號' alt='17'>
	</td>
	<td>
	cherie 0929456123 高雄市三民區建工路一號<br />
	<br />
	</td>
	<td>
	85元
	</td>
	</tr>
	</table>
	<div id="results" />
	</div>
	</body>
	</html>

view raw googlemapmark.html hosted with ❤ by GitHub

測試碼：http://jsfiddle.net/3vCQg/

工欲善其事，必先利其器，要學習jquery除了筆記本等工具之外，也有線上版的開發測試工具。
http://jsfiddle.net/

左邊選單提供使用者選擇想要使用的javascript lib，如各版本的JQuery、ExtJS等。
雖然介面跟一般所見即所得的編輯器沒什麼太大不同，但左邊選單的功能卻大大的加分。
介面上將HTML、CSS、JavaScript分開，方便使用者更改測試語法。
網站還提供儲存機制十分便利，也方便分享。

補充：http://dotnetfiddle.net/
可以讓使用者線上測試C#的程式碼，並支援MVC架構，
當真是神器。

2013年9月5日星期四

Google Map API - 計算兩地距離

要估算兩地距離，使用者只要給Google Map API 兩地的地址，就可以輕易地取得計算後的距離。

	<html>
	<head>
	<title></title>
	</head>
	<body>
	<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css"
	rel="stylesheet" />
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=zh-TW"></script>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript">


	$(function () {
	Distance();
	});
	function Distance() {
	var start = "高雄市鳳山區光遠路226號";
	var end = "屏東市廣東路100號";
	var request = {
	origin: start,
	destination: end,
	travelMode: google.maps.DirectionsTravelMode.DRIVING
	};
	//宣告
	var directionsService = new google.maps.DirectionsService();
	directionsService.route(request, function (response, status) {
	var strTmp = "";
	if (status == google.maps.DirectionsStatus.OK) {
	var route = response.routes[0];
	for (var i = 0; i < route.legs.length; i++) {
	var routeSegment = i + 1;
	strTmp += route.legs[i].distance.text;
	}
	//取得距離(正整數，公尺)
	var dist = parseInt(parseFloat(strTmp) * 1000).toString();
	alert(dist);
	}
	});
	}
	</script>
	</body>
	</html>