Go3.co.kr MintState BBS > Tech > Ajax & Issue

Swiper - Most Modern Mobile Touch Slider

MintState — Tue, 02 Feb 2016 10:33:28 +0900

[U]Swiper - Most Modern Mobile Touch Slider[/U]

다양한 스와프 기능을 탑제한 js 이다.

해당 홈페이지는 http://www.idangero.us/swiper/ 에서 확인 할 수 있고
데모는 http://www.idangero.us/swiper/demos/ 에서 확인 가능 하다.
.

[jquery] 스와프 가능한 이미지 배너 - OWL Carousel

MintState — Fri, 30 May 2014 11:57:39 +0900

[jquery] 스와프 가능한 이미지 배너 - OWL Carousel OWL Carousel Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. http://owlgraphic.com/owlcarousel/

구글맵 api 편리하기 사용가능하게 해주는 gmaps.js

MintState — Mon, 04 Mar 2013 09:44:46 +0900

[U]구글맵 api 편리하기 사용가능하게 해주는 gmaps.js[/U]

[ATTACH]776[/ATTACH]
[URL]http://hpneo.github.com/gmaps/[/URL]

gmaps.js allows you to use the potential of Google Maps in a simple way.
No more extensive documentation or large amount of code.

가장쉽게 구글 맵을 적용시킬수 있습니다.

[CODE js][/CODE]

아래 주소로 접속하셔서 샘플을 보신후 자신의 홈페이지에 적용하세요
[URL]http://hpneo.github.com/gmaps/examples.html[/URL]

jQuery - FullCalendar

MintState — Wed, 21 Mar 2012 14:32:45 +0900

[U]jQuery - FullCalendar[/U]

FullCalendar 는 구글 카렌다와 비슷하게 표시해 줄수 있는 jQuery Plugin 입니다.
사이즈(날짜)조절, Drag&Drop 이 가능하고 구글이나 자체의 json 데이터를 이용할 수 있습니다.

http://arshaw.com/fullcalendar/

jquery - select box

MintState — Fri, 25 Nov 2011 12:49:02 +0900

[U]jquery - select box[/U]

jQuery로 선택된 값 읽기
$("#myselect option:selected").val();
$("select[name=name]").val();

jQuery로 선택된 내용 읽기
$("#myselect option:selected").text();

선택된 위치
var index = $("#test option").index($("#test option:selected"));

-------------------------------------------------------------------
// option 항목 추가
$("#myselect").append("");
$("#myselect").append("");

// option 항목 맨 첫 위치에 추가
$("#myselect").prepend("");

// 전체 option 변경
$("#myselect").html("");

// 지정된 index 위치의 option 변경
$("#myselect option:eq(1)").replaceWith("");
$("#myselect option:eq(2)").replaceWith("");

// 지정된 index 값으로 select 하기
$("#myselect option:eq(2)").attr("selected", "selected");

// text 값으로 select 하기
$("#myselect option").text("학생").attr("selected", "selected");

// value 값으로 select 하기
$("#myselect").val("2");

// 지정된 인덱스 값의 item 삭제
$("#myselect option:eq(0)").remove();

// 첫번째 item 삭제
$("#myselect option:first").remove();

// 마지막 item 삭제
$("#myselect option:last").remove();

// 선택된 옵션의 text 구하기
alert($("#myselect option:selected").text());

// 선택된 옵션의 value 구하기
alert($("#myselect option:selected").val());

// 선택된 옵션 index 구하기
alert($("#myselect option").index($("#myselect option:selected")));

// SelecBox 아이템 갯수 구하기
alert($("#myselect option").size());

// 선택된 옵션 앞의 아이템 갯수
alert($("#myselect option:selected").prevAll().size());

// 선택된 옵션 후의 아이템 갯수
alert($("#myselect option:selected").nextAll().size());

// 지정된 index 위치 바로 다음에 option 추가
$("#myselect option:eq(0)").after("");

// 지정된 index 위치 바로 앞에 option 추가
$("#myselect option:eq(3)").before("");

// Getting values when item is selected
$("#myselect").change(function() {
alert($(this).val());
alert($("> option:selected", this).text());
});

Wowza Streaming Server

MintState — Mon, 19 Sep 2011 21:55:54 +0900

[U]Wowza Streaming Server[/U]

여러가지 스트리밍서버들이 존재한다.
아이폰이나 안드로이드폰은 http를 이용해서 스트리밍을 할 수 있다.
아이폰 경우 H.264, AAC 로 인코딩이 되어 있다면 특별한 방법이 없어도 스트리밍이 가능하다.
안드로이도 HTML5태그를 이용 [URL=http://www.videohelp.com/tools/mp4box]MP4BOX[/URL] 처리만 해주면 된다.

예) mp4box -hint video.mp4

그런데 문제는 PC에서는 http 프로토콜로 스트리밍을 할수 없다.
이제 mms도 한물 갔고.. [URL=http://h264.code-shop.com/trac/wiki]H264 Streaming Module[/URL]를 사용하면 된다는데 안정화 되지 않았고 완벽히 지원되지 않는다.
무료로 지원되는것은 한계가 있다.
Flash Media Server 도 설치, 사용하기는 불편하다.
APPLE서 공개된 [URL=http://dss.macosforge.org/]Darwin Streaming Server[/URL]는 APPLE이 아닌 다른 서버에서는 지원이 잘 안된다.

그럼 유료지만 쓸만한 것은 바로 [URL=http://www.wowza.com]Wowza Streaming Server[/URL]다.

이제 wmv 에서 mp4가 대세인 시대가 왔다. divx도 아이폰이 지원하지 않는 관계로 많이 사라졌다.

그럼 Wowza는 어떤 기능이 있는지 알아보자.
Wowza Media Server 2, a video streaming server for live and on-demand is the proven, unified, industrial strength media server for live and on-demand video/audio streaming, video/audio/text chat, recording and more. It takes your H.264 content to any screen - the desktop, mobile and the living room - to all popular media platforms:
[LIST][*]Adobe® Flash®
[*]Apple® iOS: iPhone®, iPad™, and iPod® touch
[*]Microsoft® Silverlight®
[*]Apple QuickTime™
[*]Android™, Blackberry® and other 3GPP platforms
[*]Set-top boxes and more...
[/LIST:u]
H.264로 인코딩된 컨텐츠를 어떠한 플랫폼에서든 사용할 수 있다고 한다. 또한 video/audio 스트리밍 뿐만아니라 챗팅, 레코딩도 지원한다.
한마디로 거의 모든 기능을 지원한다.
그리고 동시접속 10건만 가능한 개발자 버전은 무료이다.

그렇다고 모든 플랫폼에서 서비스를 하는 것이 쉬운일은 아니다.
서버를 설치하고 세팅하고 각각 플랫폼에 맞게 코딩을 해주어야 한다.

설치는 무지 간단하다. http://www.wowza.com/store.html 에서 설치하고자 하는 운영체제의 설치 파일을 받아 인스톨만 하면 된다.
라이센스는 우선 무료로 받을 수 있다.

VOD 서비스를 기준으로 윈도우에서 설치를 해보자.
자바가 필수로 필요하기 때문에 jdk를 다운받아 설치를 해준다.
그리고 인스톨을 하고 중간에 라이센스를 넣어 준다.
설치가 완료되면 설치폴더 밑에 conf 폴더에 [B]vod[/B]라는 이름으로 폴더를 만들어 준다.
그 폴더에 conf 폴더의 [COLOR=blue]Apllication.xml[/COLOR]파일을 복사해 준다.
그리고 설피폴더 밑의 applications 폴더에도 [B]vod[/B]라는 이름으로 폴더를 만들어 준다.
vod 폴더에 복사한 Aplication.xml 파일이 설정파일 이다. 입맛에 맞게 고쳐 주면 된다.
거의 건드릴게 없다.
[COLOR=blue]컨텐츠폴더[/COLOR] 만 고치면 된다.
I:\LocalUser\minidisk\wowza 이런식으로 고치고 해당 폴더에 컨텐츠(mp4파일)을 넣어준다.
그리고 프로그램을 실행 시켜 주면 끝이다.

[URL=http://www.longtailvideo.com/]JW Player[/URL]를 이용하면 더욱 편하게 서비스를 할 수 있다.

PHP 의 경우 $_SERVER[HTTP_USER_AGENT] 를 판별해서 안드로이드와 아이폰 PC를 구분하여 서비스를 한다.
안드로이드는 rtsp를 사용하고 PC는 rtmp를 사용한다 또한 아이폰은 http를 사용하여 서비스를 하면 된다.

rtsp를 사용하는 안드로이드나 퀵타임은 rtp에대한 [COLOR=blue]Apllication.xml[/COLOR]설정을 약간 수정해야 한다.
PlayMethod 부분을 기본인 digest을 none로 바꾸어준다.
[CODE]

digest
none
[/CODE]

만일 재생되지 않는 다면 [COLOR=blue]conf/VHost.xml[/COLOR] 설정 중에
1935 를 1935, 554 로 수정해주면 된다.
RTSP 가 기본으로 554포트를 쓰기 때문이다.

다음과 같은 URL로 서비스를 할 수 있다. 참고 하길 바란다.
안드로이드 : rtsp://IP:1935/vod/mp4:sample.mp4
일반PC : rtmp://IP/vod/mp4:sample.mp4
아이폰 : http://IP:1935/vod/mp4:sample.mp4/playlist.m3u8

스마트폰은 HTML5 VIDEO 태그를 지원한다. 다음과 같이 하면 된다.
[CODE html]

[/CODE]

컨텐츠에 하위 폴더의 파일을 재생하기 위해서는 /_definst_/ 를 써주면 된다.
http://IP:1935/vod/_definst_/mp4:FOLDER/sample.mp4

마지막으로 서비스를 등록시켜 주면 된다.
리눅스의 경우는 chkconfig를 이용하면 되고 윈도우즈는 서비스 항목을 자동으로 하면 된다.

웹에서 구한 간단한 설명서를 첨부한다.

참고) rtsp 를 이용할 경우 안드로이드에서 mp4box를 이용 hint 를 해주지 않아도 된다. 만일 http 프로토콜을 쓴다면
mp4box -hint sample.mp4 와 같이 hint 처리를 해준다.

jQuery Datepicker

MintState — Thu, 23 Jun 2011 14:13:40 +0900

[U]jQuery Datepicker[/U]

jQuery UI에 카렌더 기능이 있습니다.
하지만 좀 무겁죠..
그래서 좀 찾아 봤습니다.

[B]Date Picker - jQuery plugin[/B]
[URL]http://www.eyecon.ro/datepicker[/URL]

[B]jQuery Datepicker[/B]
[URL]http://keith-wood.name/datepick.html[/URL]

[B]jQuery date picker plug-in[/B]
[URL]http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html[/URL]

[B]Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework[/B]
[URL]http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/[/URL]

이 밖에도 많이 있습니다.

Using the Twitter Search API

MintState — Wed, 01 Jun 2011 15:46:30 +0900

[U]Using the Twitter Search API[/U]

Twitters new search feature is great for finding interesting people and topics to follow. So i wrote a script to get search results from twitter and display them on your site. This could be integrated into an existing application or used standalone to follow a particular topic or keyword on twitter,Â [URL=http://papermashup.com/demos/twitter-search.php]Check the Demo[/URL].

The script uses PHP and CURL to get the twitter search results to display them on the page. for the demo i’ve set an if statement to display results for ‘papermashup.com’ if no get variable is present.

Here’s the code that allows us to enter our search term, on submit it posts a get variable to the URL which PHP then processes with CURL.

[CODE html]

[/CODE]

So we use PHP, CURL, and the SimpleXMLElement() class in PHP5 to parse the XML file. Once we have the xml data, regular expression is used to find the links in the xml content element, which is then saved in $description.

[CODE php]// Date function (this could be included in a seperate script to keep it clean)
function date_diff($d1, $d2){
$d1 = (is_string($d1) ? strtotime($d1) : $d1);
$d2 = (is_string($d2) ? strtotime($d2) : $d2);

$diff_secs = abs($d1 - $d2);
$base_year = min(date("Y", $d1), date("Y", $d2));

$diff = mktime(0, 0, $diff_secs, 1, 1, $base_year);
$diffArray = array(
"years" => date("Y", $diff) - $base_year,
"months_total" => (date("Y", $diff) - $base_year) * 12 + date("n", $diff) - 1,
"months" => date("n", $diff) - 1,
"days_total" => floor($diff_secs / (3600 * 24)),
"days" => date("j", $diff) - 1,
"hours_total" => floor($diff_secs / 3600),
"hours" => date("G", $diff),
"minutes_total" => floor($diff_secs / 60),
"minutes" => (int) date("i", $diff),
"seconds_total" => $diff_secs,
"seconds" => (int) date("s", $diff)
);
if($diffArray['days'] > 0){
if($diffArray['days'] == 1){
$days = '1 day';
}else{
$days = $diffArray['days'] . ' days';
}
return $days . ' and ' . $diffArray['hours'] . ' hours ago';
}else if($diffArray['hours'] > 0){
if($diffArray['hours'] == 1){
$hours = '1 hour';
}else{
$hours = $diffArray['hours'] . ' hours';
}
return $hours . ' and ' . $diffArray['minutes'] . ' minutes ago';
}else if($diffArray['minutes'] > 0){
if($diffArray['minutes'] == 1){
$minutes = '1 minute';
}else{
$minutes = $diffArray['minutes'] . ' minutes';
}
return $minutes . ' and ' . $diffArray['seconds'] . ' seconds ago';
}else{
return 'Less than a minute ago';
}
}

// Work out the Date plus 8 hours
// get the current timestamp into an array
$timestamp = time();
$date_time_array = getdate($timestamp);

$hours = $date_time_array['hours'];
$minutes = $date_time_array['minutes'];
$seconds = $date_time_array['seconds'];
$month = $date_time_array['mon'];
$day = $date_time_array['mday'];
$year = $date_time_array['year'];

// use mktime to recreate the unix timestamp
// adding 19 hours to $hours
$timestamp = mktime($hours + 0,$minutes,$seconds,$month,$day,$year);
$theDate = strftime('%Y-%m-%d %H:%M:%S',$timestamp);

// END DATE FUNCTION

//Search API Script

$q=$_GET['q'];

if($_GET['q']==''){

$q = 'papermashup.com';}

$search = "http://search.twitter.com/search.atom?q=".$q."";

$tw = curl_init();

curl_setopt($tw, CURLOPT_URL, $search);
curl_setopt($tw, CURLOPT_RETURNTRANSFER, TRUE);
$twi = curl_exec($tw);
$search_res = new SimpleXMLElement($twi);

echo "

Twitter search results for '".$q."'

";

## Echo the Search Data

foreach ($search_res->entry as $twit1) {

$description = $twit1->content;

$description = preg_replace("#(^|[\n ])@([^ \"\t\n\r<]*)#ise", "'\\1http://www.twitter.com/\\2\" >@\\2'", $description);
$description = preg_replace("#(^|[\n ])([\w]+?://[\w]+[^ \"\n\r\t<]*)#ise", "'\\1\\2'", $description);
$description = preg_replace("#(^|[\n ])((www|ftp)\.[^ \"\t\n\r<]*)#ise", "'\\1\\2'", $description);

$retweet = strip_tags($description);

$date = strtotime($twit1->updated);
$dayMonth = date('d M', $date);
$year = date('y', $date);
$message = $row['content'];
$datediff = date_diff($theDate, $date);

echo "

author->uri,"\" target=\"_blank\">link[1]->attributes()->href,"\" title=\"", $twit1->author->name, "\" />\n";
echo "

".$description."

From: ", $twit1->author->name," Retweet!

".$datediff."

";

}

curl_close($tw);[/CODE]

URL : http://papermashup.com/using-the-twitter-search-api/

Twitter Search using the Twitter API and PHP

MintState — Wed, 01 Jun 2011 15:43:49 +0900

[U]Twitter Search using the Twitter API and PHP[/U]

In this tutorial we will show you ho-to use the Twitter API for some simple search requests. For all requests we send to the Twitter API we will be using cURL with PHP. You need to check if you have cURL enabled on your server. To test this create a file which contains:

[CODE php]echo phpinfo();[/CODE]

Search the page for cURL section. If you do not have cURL enabled on your server then you will either have to contact technical assistance. If you're using a local server, a quick Google search will tell you tell you how-to enable cURL.
Using Twitter's search api, we don't need to authenticate on the API server what means we don't need to register for an API key and/or secret.

[B]The Twitter PHP Class[/B]

To make our script easy to use we're going to build a class to return search results from twitter.

So first of all we are just going to declare our class and define the return type.

[CODE php]class Twitter {
public function __construct(){ }
}[/CODE]

Next we are going to build our actual search results function. For this function we will have one parameter which contains the search query.

[CODE php]public function searchResults( $search = null ) {
$url = "http://search.twitter.com/search.atom?q=" . urlencode( $search ) . "&lang=en&rpp=50";
$curl = curl_init();
curl_setopt( $curl, CURLOPT_URL, $url );
curl_setopt( $curl, CURLOPT_RETURNTRANSFER, 1 );
$result = curl_exec( $curl );
curl_close( $curl );
$return = new SimpleXMLElement( $result );
return $return;
}[/CODE]

This function is just using some basic cURL functions and then creating a Simple XML Element and returning it. If you look for the [URL=http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search]Twitter Search API Method[/URL]" you will see that the two options for the response are JSON and Atom/XML. For the example above we used Atom/XML. Notice, when making requests you should always urlencode() the q parameter. We also have two other parameters in our url, we have lang and rrp. I'm sure I don't need to explain what lang is (for ISO language codes check this [URL=http://en.wikipedia.org/wiki/ISO_639-1]Wiki[/URL] page). [COLOR=blue]rrp[/COLOR] is the number of tweets to [COLOR=blue]Return Per Page[/COLOR], the maximum is 100. This function returns an object so we will have to keep this in mind when using this function later on.

The next function we're going to write will request the weekly trends from twitter and return them in an array.

For the trends we cannot request the data in Atom format, Twitter will return it as JSON so we will use PHP to decode the return.

[CODE php]public function weeklyTrends() {
$url = "http://search.twitter.com/trends/weekly.json";
$curl = curl_init();
curl_setopt( $curl, CURLOPT_URL, $url );
curl_setopt( $curl, CURLOPT_RETURNTRANSFER, 1 );
$result = curl_exec( $curl );
curl_close( $curl );
$return = json_decode( $result, true );
return $return;
}[/CODE]

The function is very similar to the first except this time instead of creating a simple xml element we use json_decode (The second parameter for this function is telling php to convert objects into array elements).

Trends have two parameters dates and exclude which you can read about at this [URL=http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-trends-weekly]Twitter API page[/URL]

[B]The finished Twitter class[/B]

[CODE php]class Twitter {
public function __construct(){ }
public function searchResults( $search = null ) {
$url = "http://search.twitter.com/search.atom?q=" . urlencode( $search ) . "&lang=en&rpp=50";
$curl = curl_init();
curl_setopt( $curl, CURLOPT_URL, $url );
curl_setopt( $curl, CURLOPT_RETURNTRANSFER, 1 );
$result = curl_exec( $curl );
curl_close( $curl );
$return = new SimpleXMLElement( $result );
return $return;
$return = new SimpleXMLElement( $result );
}
public function weeklyTrends() {
$url = "http://search.twitter.com/trends/weekly.json";
$curl = curl_init();
curl_setopt( $curl, CURLOPT_URL, $url );
curl_setopt( $curl, CURLOPT_RETURNTRANSFER, 1 );
$result = curl_exec( $curl );
curl_close( $curl );
$return = json_decode( $result, true );
return $return;
}
}[/CODE]

[B]Using the Twitter class[/B]

Save the class as something like twitter.class.php and then create a new blank document. The first thing we want to do in this document is include the class and then create a new instance of the class.

[CODE php]require_once("twitter.class.php");
$Twitter = new Twitter;[/CODE]

Next we can use a foreach loop to output the data.

[CODE php]foreach( $results->entry as $result ) {
echo "

author->uri ."\">". $result->author->name ."

link[1]->attributes()->href ."\" style=\"float: left;\">

". $result->content ."

";
}[/CODE]

Remember that searchResults does not return an array.
Our weekly trends function on the other hand does return an array.

[CODE php]require_once("twitter.class.php");
$Twitter = new Twitter;
$trends = $Twitter->weeklyTrends();
foreach( $trends["trends"] as $date => $trends ) {
echo "

". $date ." trends

";
foreach( $trends as $k => $trend ) {
echo $trend["query"] ."";
}
}[/CODE]

The trends function returns a 3 dimensional array making it slightly harder to use but we still get the results that we want.

You can [URL=http://www.finalwebsites.com/forums/class/twitter]download the source code[/URL] used in this tutorial.

URL : http://www.finalwebsites.com/forums/topic/twitter-search-using-the-twitter-api-and-php

PHP Twitter Search API

MintState — Wed, 01 Jun 2011 15:34:32 +0900

[U]PHP Twitter Search API[/U]

I've implemented the twitter search API in a PHP class just for fun. It implements the entire search API as of February 25, 2009. I've only tested this with PHP 5.2.6 but I am fairly confident that most installations of PHP5 should work just fine. If you try it with PHP4 and it works (or if you have to jigger it) let me know.

You can get the source code at http://greenservr.com/projects/twittersearch/TwitterSearch.phps

Here are a couple examples (after including the class):

This example makes use of method chaining to create a "sentence". Chaining isn't a requirement but I think it works here. What this example does is search for tweets from the user "ryanfaerman" with the hashtag "#flsccc".

$search = new TwitterSearch();
$search->user_agent = 'phptwittersearch:ryan.faerman@gmail.com';

$results = $search->from('ryanfaerman')->with('flsccc')->results();
The user agent is optional, but is recommended. This way the folks over at Twitter know who is hitting their server. I'll be leaving it out in other examples for clarity.

If you want to put in the query during instantiation, you can do that too. Anything that you'd use on search.twitter.com can be passed as the argument. This example searches all twitter for any tweets that mention the word "monkey".

$search = new TwitterSearch('monkey');
$results = $search->results();
Each time you add another search term, it is appended to the query you are building. Once you get the results, the query is cleared.

This example searches for the last 50 tweets from the user ?darthvader? where he mentions ?storm trooper?.

$search->from('darthvader');
$search->contains('storm trooper');
$results = $search->rpp(50)->results();
This example searches for any tweets within a 25 mile radius of the provided coordinates.

$results = $search->geocode(40.757929, -73.985506, 25)->results();
There are quite a few more search operators which are clear from the source code, so I encourage you to take a look. Lastly, there is the trends function. Calling this method returns the top ten queries that are currently trending on Twitter.

$trends = $search->trends();
If you end up using this in a project of yours, I'd really enjoy hearing about it.

URL : http://ryanfaerman.com/twittersearch/

모바일(iOS 용) 터치 관련 jQuery 플러그인

MintState — Mon, 18 Apr 2011 00:08:59 +0900

[U]모바일(iOS 용) 터치 관련 jQuery 플러그인[/U]

링크 주소 : [URL]http://lab.koism.com/source/jquery/mobileTest6.html[/URL]
위 링크는 아이폰,안드로이드 폰으로 들어가셔야 동작 확인이 가능합니다.

첨부파일을 확인 하세요.

출처 : http://lab.koism.com

GEO <-> KATEC 변환

MintState — Mon, 21 Feb 2011 11:17:22 +0900

[U]GEO <-> KATEC 변환[/U]

[B]PHP 방법[/B]
[CODE php]class GeoTrans{
var $srctype;
var $dsttype;
var $m_Ind, $m_Es, $m_Esp, $src_m, $dst_m;

var $EPSLN = 0.0000000001;
var $m_arMajor = 6378137.0;
var $m_arMinor = 6356752.3142;

var $m_arScaleFactor = array();
var $m_arLonCenter = array();
var $m_arLatCenter = array();
var $m_arFalseNorthing = array();
var $m_arFalseEasting = array();

function GeoTrans($srctype = "katec", $dsttype = "geo")
{
$this->m_arScaleFactor["geo"] = 1;
$this->m_arLonCenter["geo"] = 0.0;
$this->m_arLatCenter["geo"] = 0.0;
$this->m_arFalseNorthing["geo"] = 0.0;
$this->m_arFalseEasting["geo"] = 0.0;

$this->m_arScaleFactor["katec"] = 0.9999;
$this->m_arLonCenter["katec"] = 2.23402144255274;
$this->m_arLatCenter["katec"] = 0.663225115757845;
$this->m_arFalseNorthing["katec"] = 600000.0;
$this->m_arFalseEasting["katec"] = 400000.0;

$this->srctype = $srctype;
$this->dsttype = $dsttype;

$temp = $this->m_arMinor / $this->m_arMajor;
$this->m_Es = 1.0 - $temp * $temp;
$this->m_Esp = $this->m_Es / (1.0 - $this->m_Es);

if ($this->m_Es < 0.00001) {
$this->m_Ind = 1.0;
}
else {
$this->m_Ind = 0.0;
}

$this->src_m = $this->m_arMajor * $this->mlfn($this->e0fn($this->m_Es), $this->e1fn($this->m_Es), $this->e2fn($this->m_Es), $this->e3fn($this->m_Es), $this->m_arLatCenter[$srctype]);
$this->dst_m = $this->m_arMajor * $this->mlfn($this->e0fn($this->m_Es), $this->e1fn($this->m_Es), $this->e2fn($this->m_Es), $this->e3fn($this->m_Es), $this->m_arLatCenter[$dsttype]);
}

function D2R($degree)
{
return $degree * M_PI / 180.0;
}

function R2D($radian)
{
return $radian * 180.0 / M_PI;
}

function e0fn($x)
{
return 1.0 - 0.25 * $x * (1.0 + $x / 16.0 * (3.0 + 1.25 * $x));
}

function e1fn($x)
{
return 0.375 * $x * (1.0 + 0.25 * $x * (1.0 + 0.46875 * $x));
}

function e2fn($x)
{
return 0.05859375 * $x * $x * (1.0 + 0.75 * $x);
}

function e3fn($x)
{
return $x * $x * $x * (35.0 / 3072.0);
}

function mlfn($e0, $e1, $e2, $e3, $phi)
{
return $e0 * $phi - $e1 * sin(2.0 * $phi) + $e2 * sin(4.0 * $phi) - $e3 * sin(6.0 * $phi);
}

function asinz($value)
{
if (abs($value) > 1.0) $value = ($value > 0 ? 1 : -1);
return asin($value);
}

function conv($in_x, $in_y, &$out_x, &$out_y)
{
if ($this->srctype == "geo") {
$inlon = $this->D2R($in_x);
$inlat = $this->D2R($in_y);
}
else {
$this->tm2geo($in_x, $in_y, $inlon, $inlat);
}

$outlon = $inlon;
$outlat = $inlat;

if ($this->dsttype == "geo") {
$out_x = $this->R2D($outlon);
$out_y = $this->R2D($outlat);
}
else {
$this->geo2tm($outlon, $outlat, $out_x, $out_y);
$out_x = round($out_x);
$out_y = round($out_y);
}
}

function geo2tm($lon, $lat, &$x, &$y)
{
$delta_lon = $lon - $this->m_arLonCenter[$this->dsttype];
$sin_phi = sin($lat);
$cos_phi = cos($lat);

if ($this->m_Ind != 0) {
$b = $cos_phi * sin($delta_lon);

if ((abs(abs($b) - 1.0)) < $this->EPSLN) {
echo ("geo2tm: 무한대 에러");
}
}
else {
$b = 0;
$x = 0.5 * $this->m_arMajor * $this->m_arScaleFactor[$this->dsttype] * log((1.0 + $b) / (1.0 - $b));
$con = acos($cos_phi * cos($delta_lon) / sqrt(1.0 - $b * $b));

if ($lat < 0) {
$con = $con * -1;
$y = $this->m_arMajor * $this->m_arScaleFactor[$this->dsttype] * ($con - $this->m_arLatCenter[$this->dsttype]);
}
}

$al = $cos_phi * $delta_lon;
$als = $al * $al;
$c = $this->m_Esp * $cos_phi * $cos_phi;
$tq = tan($lat);
$t = $tq * $tq;
$con = 1.0 - $this->m_Es * $sin_phi * $sin_phi;
$n = $this->m_arMajor / sqrt($con);
$ml = $this->m_arMajor * $this->mlfn($this->e0fn($this->m_Es), $this->e1fn($this->m_Es), $this->e2fn($this->m_Es), $this->e3fn($this->m_Es), $lat);

$x = $this->m_arScaleFactor[$this->dsttype] * $n * $al * (1.0 + $als / 6.0 * (1.0 - $t + $c + $als / 20.0 * (5.0 - 18.0 * $t + $t * $t + 72.0 * $c - 58.0 * $this->m_Esp))) + $this->m_arFalseEasting[$this->dsttype];
$y = $this->m_arScaleFactor[$this->dsttype] * ($ml - $this->dst_m + $n * $tq * ($als * (0.5 + $als / 24.0 * (5.0 - $t + 9.0 * $c + 4.0 * $c * $c + $als / 30.0 * (61.0 - 58.0 * $t + $t * $t + 600.0 * $c - 330.0 * $this->m_Esp))))) + $this->m_arFalseNorthing[$this->dsttype];
}

function tm2geo($x, $y, &$lon, &$lat)
{
$max_iter = 6;

if ($this->m_Ind != 0) {
$f = exp($x / ($this->m_arMajor * $this->m_arScaleFactor[$this->srctype]));
$g = 0.5 * ($f - 1.0 / $f);
$temp = $this->m_arLatCenter[$this->srctype] + $y / ($this->m_arMajor * $this->m_arScaleFactor[$this->srctype]);
$h = cos($temp);
$con = sqrt((1.0 - $h * $h) / (1.0 + $g * $g));
$lat = asinz($con);

if ($temp < 0) $lat *= -1;

if (($g == 0) && ($h == 0))
$lon = $this->m_arLonCenter[$this->srctype];
else
$lon = atan($g / $h) + $this->m_arLonCenter[$this->srctype];
}

$x -= $this->m_arFalseEasting[$this->srctype];
$y -= $this->m_arFalseNorthing[$this->srctype];

$con = ($this->src_m + $y / $this->m_arScaleFactor[$this->srctype]) / $this->m_arMajor;
$phi = $con;

$i = 0;

while (true) {
$delta_Phi = (($con + $this->e1fn($this->m_Es) * sin(2.0 * $phi) - $this->e2fn($this->m_Es) * sin(4.0 * $phi) + $this->e3fn($this->m_Es) * sin(6.0 * $phi)) / $this->e0fn($this->m_Es)) - $phi;
$phi = $phi + $delta_Phi;
if (abs($delta_Phi) <= $this->EPSLN) break;

if ($i >= $max_iter)
echo ("tm2geo: 무한대 에러");

$i++;
}

if (abs($phi) < (M_PI / 2)) {
$sin_phi = sin($phi);
$cos_phi = cos($phi);
$tan_phi = tan($phi);
$c = $this->m_Esp * $cos_phi * $cos_phi;
$cs = $c * $c;
$t = $tan_phi * $tan_phi;
$ts = $t * $t;
$con = 1.0 - $this->m_Es * $sin_phi * $sin_phi;
$n = $this->m_arMajor / sqrt($con);
$r = $n * (1.0 - $this->m_Es) / $con;
$d = $x / ($n * $this->m_arScaleFactor[$this->srctype]);
$ds = $d * $d;
$lat = $phi - ($n * $tan_phi * $ds / $r) * (0.5 - $ds / 24.0 * (5.0 + 3.0 * $t + 10.0 * $c - 4.0 * $cs - 9.0 * $this->m_Esp - $ds / 30.0 * (61.0 + 90.0 * $t + 298.0 * $c + 45.0 * $ts - 252.0 * $this->m_Esp - 3.0 * $cs)));
$lon = $this->m_arLonCenter[$this->srctype] + ($d * (1.0 - $ds / 6.0 * (1.0 + 2.0 * $t + $c - $ds / 20.0 * (5.0 - 2.0 * $c + 28.0 * $t - 3.0 * $cs + 8.0 * $this->m_Esp + 24.0 * $ts))) / $cos_phi);
}
else {
$lat = M_PI * 0.5 * sin($y);
$lon = $this->m_arLonCenter[$this->srctype];
}
}

function getDistancebyGeo($lon1, $lat1, $lon2, $lat2)
{
$lat1 = $this->D2R($lat1);
$lon1 = $this->D2R($lon1);
$lat2 = $this->D2R($lat2);
$lon2 = $this->D2R($lon2);

$longitude = $lon2 - $lon1;
$latitude = $lat2 - $lat1;

$a = pow(sin($latitude / 2.0), 2) + cos($lat1) * cos($lat2) * pow(sin($longitude / 2.0), 2);
return 6376.5 * 2.0 * atan2(sqrt($a), sqrt(1.0 - $a));
}

function getDistancebyKatec($x1, $y1, $x2, $y2)
{
$geo = new GeoTrans;
$geo->conv($x1, $y1, $lon1, $lat1);
$geo->conv($x2, $y2, $lon2, $lat2);

return $this->getDistancebyGeo($lon1, $lat1, $lon2, $lat2);
}

function getTimebySec($distance)
{
return round(3600 * $distance / 4);
}

function getTimebyMin($distance)
{
return (int)ceil($this->getTimebySec($distance) / 60);
}
}

$naverx = "306151";
$navery = "556443";

$geo = new GeoTrans;
$geo->conv($naverx,$navery,$x,$y);

echo("======input naver postion=======\n");
echo("naver x: ".$naverx);
echo("\n");
echo("naver y: ".$navery);
echo("\n");
echo("======convert naver to google=======\n");
echo("google lng: ".$x);
echo("\n");
echo("google lat: ".$y);
echo("\n");

$geo = new GeoTrans("geo","katec");
$geo->conv($x,$y,$final_naverx,$final_navery);
echo("======convert google to naver=======\n");
echo("final naver x: ".$final_naverx);
echo("\n");
echo("final naver y: ".$final_navery);
echo("\n");
?>[/CODE]

[U]Javascript 방법[/U]
[CODE js]var Point = function(x, y) {
this.x = x;
this.y = y;
}

var GeoTrans = function() {
this.srctype = "katec";
this.dsttype = "geo";
this.m_Ind = 0;
this.m_Es = 0;
this.m_Esp = 0;
this.src_m = 0;
this.dst_m = 0;

this.EPSLN = 0.0000000001;
this.m_arMajor = 6378137.0;
this.m_arMinor = 6356752.3142;

this.m_arScaleFactor = new Array();
this.m_arLonCenter = new Array();
this.m_arLatCenter = new Array();
this.m_arFalseNorthing = new Array();
this.m_arFalseEasting = new Array();
};

GeoTrans.prototype.init = function(srctype, dsttype) {
this.m_arScaleFactor["geo"] = 1;
this.m_arLonCenter["geo"] = 0.0;
this.m_arLatCenter["geo"] = 0.0;
this.m_arFalseNorthing["geo"] = 0.0;
this.m_arFalseEasting["geo"] = 0.0;

this.m_arScaleFactor["katec"] = 0.9999;
this.m_arLonCenter["katec"] = 2.23402144255274;
this.m_arLatCenter["katec"] = 0.663225115757845;
this.m_arFalseNorthing["katec"] = 600000.0;
this.m_arFalseEasting["katec"] = 400000.0;

this.srctype = srctype;
this.dsttype = dsttype;

var tmp = this.m_arMinor / this.m_arMajor;
this.m_Es = 1.0 - tmp * tmp;
this.m_Esp = this.m_Es / (1.0 - this.m_Es);

if(this.m_Es < 0.00001) {
this.m_Ind = 1.0;
} else {
this.m_Ind = 0.0;
}

this.src_m = this.m_arMajor * this.mlfn(this.e0fn(this.m_Es), this.e1fn(this.m_Es), this.e2fn(this.m_Es), this.e3fn(this.m_Es), this.m_arLatCenter[srctype]);
this.dst_m = this.m_arMajor * this.mlfn(this.e0fn(this.m_Es), this.e1fn(this.m_Es), this.e2fn(this.m_Es), this.e3fn(this.m_Es), this.m_arLatCenter[dsttype]);
}

GeoTrans.prototype.D2R = function(degree) {
return degree* Math.PI / 180.0;
}

GeoTrans.prototype.R2D = function(radian) {
return radian * 180.0 / Math.PI;
}

GeoTrans.prototype.e0fn = function(x) {
return 1.0 - 0.25 * x * (1.0 + x / 16.0 * (3.0 + 1.25 * x));
}

GeoTrans.prototype.e1fn = function(x) {
return 0.375 * x * (1.0 + 0.25 * x * (1.0 + 0.46875 * x));
}

GeoTrans.prototype.e2fn = function(x) {
return 0.05859375 * x * x * (1.0 + 0.75 * x);
}

GeoTrans.prototype.e3fn = function(x) {
return x * x * x * (35.0 / 3072.0);
}

GeoTrans.prototype.mlfn = function(e0, e1, e2, e3, phi) {
return e0 * phi - e1 * Math.sin(2.0 * phi) + e2 * Math.sin(4.0 * phi) - e3 * Math.sin(6.0 * phi);
}

GeoTrans.prototype.asinz = function(value) {
if(Math.abs(value) > 1.0) value = (value > 0 ? 1: -1);
return Math.asin(value);
}

GeoTrans.prototype.conv = function(in_pt) {
var inlon, inlat, outlon, outlat;

var tmpPt = new Point();
var out_pt = new Point();

if(this.srctype == "geo") {
tmpPt.x = this.D2R(in_pt.x);
tmpPt.y = this.D2R(in_pt.y);
} else {
this.tm2geo(in_pt, tmpPt);
}

outlon = inlon;
outlat = inlat;

if(this.dsttype == "geo") {
out_pt.x = this.R2D(tmpPt.x);
out_pt.y = this.R2D(tmpPt.y);
} else {
this.geo2tm(tmpPt, out_pt);
out_pt.x = Math.round(out_pt.x);
out_pt.y = Math.round(out_pt.y);
}

return out_pt;
}

GeoTrans.prototype.geo2tm = function(in_pt, out_pt) {
var delta_lon = in_pt.x - this.m_arLonCenter[this.dsttype];
var sin_phi = Math.sin(in_pt.y);
var cos_phi = Math.cos(in_pt.y);

if(this.m_Ind != 0) {
var b = cos_phi * Math.sin(delta_lon);

if((Math.abs(Math.abs(b) - 1.0)) < this.EPSLN) {
alert("무한대 에러");
}
} else {
var b = 0;
x = 0.5 * this.m_arMajor * this.m_arScaleFactor[this.dsttype] * Math.log((1.0 + b) / (1.0 - b));
var con = Math.acos(cos_phi * Math.cos(delta_lon) / Math.sqrt(1.0 - b * b));

if(in_pt.y < 0) {
con = con * -1;
y = this.m_arMajor * this.m_arScaleFactor[this.dsttype] * (con - this.m_arLatCenter[this.dsttype]);
}
}

var al = cos_phi * delta_lon;
var als = al * al;
var c = this.m_Esp * cos_phi * cos_phi;
var tq = Math.tan(in_pt.y);
var t = tq * tq;
var con = 1.0 - this.m_Es * sin_phi * sin_phi;
var n = this.m_arMajor / Math.sqrt(con);
var ml = this.m_arMajor * this.mlfn(this.e0fn(this.m_Es), this.e1fn(this.m_Es), this.e2fn(this.m_Es), this.e3fn(this.m_Es), in_pt.y);

out_pt.x = this.m_arScaleFactor[this.dsttype] * n * al * (1.0 + als / 6.0 * (1.0 - t + c + als / 20.0 * (5.0 - 18.0 * t + t * t + 72.0 * c - 58.0 * this.m_Esp))) + this.m_arFalseEasting[this.dsttype];
out_pt.y = this.m_arScaleFactor[this.dsttype] * (ml - this.dst_m + n * tq * (als * (0.5 + als / 24.0 * (5.0 - t + 9.0 * c + 4.0 * c * c + als / 30.0 * (61.0 - 58.0 * t + t * t + 600.0 * c - 330.0 * this.m_Esp))))) + this.m_arFalseNorthing[this.dsttype];
}

GeoTrans.prototype.tm2geo = function(in_pt, out_pt) {
var max_iter = 6;

if(this.m_Ind != 0) {
var f = Math.exp(in_pt.x / (this.m_arMajor * this.m_arScaleFactor[this.srctype]));
var g = 0.5 * (f - 1.0 / f);
var temp = this.m_arLatCenter[this.srctype] + in_pt.y / (this.m_arMajor * this.m_arScaleFactor[this.srctype]);
var h = Math.cos(temp);
var con = Math.sqrt((1.0 - h * h) / (1.0 + g * g));
out_pt.y = asinz(con);

if(temp < 0) out_pt.y *= -1;

if((g == 0) && (h == 0)) {
out_pt.x = this.m_arLonCenter[this.srctype];
} else {
out_pt.x = Math.atan(g / h) + this.m_arLonCenter[this.srctype];
}
}

in_pt.x -= this.m_arFalseEasting[this.srctype];
in_pt.y -= this.m_arFalseNorthing[this.srctype];

var con = (this.src_m + in_pt.y / this.m_arScaleFactor[this.srctype]) / this.m_arMajor;
var phi = con;

var i = 0;

while(true) {
var delta_Phi = ((con + this.e1fn(this.m_Es) * Math.sin(2.0 * phi) - this.e2fn(this.m_Es) * Math.sin(4.0 * phi) + this.e3fn(this.m_Es) * Math.sin(6.0 * phi)) / this.e0fn(this.m_Es)) - phi;
phi = phi + delta_Phi;

if(Math.abs(delta_Phi) <= this.EPSLN) break;

if(i >= max_iter) {
alert("무한대 에러");
break;
}

i++;
}

if(Math.abs(phi) < (Math.PI / 2)) {
var sin_phi = Math.sin(phi);
var cos_phi = Math.cos(phi);
var tan_phi = Math.tan(phi);
var c = this.m_Esp * cos_phi * cos_phi;
var cs = c * c;
var t = tan_phi * tan_phi;
var ts = t * t;
var con = 1.0 - this.m_Es * sin_phi * sin_phi;
var n = this.m_arMajor / Math.sqrt(con);
var r = n * (1.0 - this.m_Es) / con;
var d = in_pt.x / (n * this.m_arScaleFactor[this.srctype]);
var ds = d * d;
out_pt.y = phi - (n * tan_phi * ds / r) * (0.5 - ds / 24.0 * (5.0 + 3.0 * t + 10.0 * c - 4.0 * cs - 9.0 * this.m_Esp - ds / 30.0 * (61.0 + 90.0 * t + 298.0 * c + 45.0 * ts - 252.0 * this.m_Esp - 3.0 * cs)));
out_pt.x = this.m_arLonCenter[this.srctype] + (d * (1.0 - ds / 6.0 * (1.0 + 2.0 * t + c - ds / 20.0 * (5.0 - 2.0 * c + 28.0 * t - 3.0 * cs + 8.0 * this.m_Esp + 24.0 * ts))) / cos_phi);
} else {
out_pt.y = Math.PI * 0.5 * Math.sin(in_pt.y);
out_pt.x = this.m_arLonCenter[this.srctype];
}
}

GeoTrans.prototype.getDistancebyGeo = function(pt1, pt2) {
var lat1 = this.D2R(pt1.y);
var lon1 = this.D2R(pt1.x);
var lat2 = this.D2R(pt2.y);
var lon2 = this.D2R(pt2.x);

var longitude = lon2 - lon1;
var latitude = lat2 - lat1;

var a = Math.pow(Math.sin(latitude / 2.0), 2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(longitude / 2.0), 2);
return 6376.5 * 2.0 * Math.atan2(Math.sqrt(a), Math.sqrt(1.0 - a));
}

GeoTrans.prototype.getDistancebyKatec = function(pt1, pt2) {
var geo = new GeoTrans("katec", "geo");
pt1 = geo.conv(pt1);
pt2 = geo.conv(pt2);

return this.getDistancebyGeo(pt1, pt2);
}

GeoTrans.prototype.getTimebySec = function(distance) {
return Math.round(3600 * distance / 4);
}

GeoTrans.prototype.getTimebyMin = function(distance) {
return Number(Math.ceil(this.getTimebySec(distance) / 60));
}

var geo = new GeoTrans();

geo.init("katec", "geo");
var pt = new Point(306151, 556443);
var out_pt = geo.conv(pt);

alert("경도 : "+out_pt.x+"\n위도 : "+out_pt.y);

//역변환
geo.init("geo", "katec");
out_pt = geo.conv(out_pt);

alert("[KATEC 좌표]\nx : "+out_pt.x+"\ny : "+out_pt.y);[/CODE]

[U]기타 참고 URL[/U]
http://aero.sarang.net/map/analysis.html
http://aero.sarang.net/map/coordinate_naver.html
http://code.google.com/intl/ko/apis/maps/
http://dev.naver.com/openapi/apis/map/javascript/reference

Twitter API 링크

MintState — Tue, 13 Jul 2010 11:02:21 +0900

[URL]http://dev.twitter.com/[/URL]
[URL]http://blog.yesyo.com/entry/twitter-Anywhere-적용-방법[/URL]
[URL]http://blog.yesyo.com/entry/twitter-API-for-PHP[/URL]

[URL]http://twtkr.com[/URL] -> 한국어 트위터
[URL]http://bit.ly[/URL] -> 주소를 잛게 만들어주는 사이트 API 제공

jQuery Simple WYSIWYG Editor

MintState — Fri, 02 Jul 2010 12:05:56 +0900

[U]jQuery Simple WYSIWYG Editor[/U]

완전한 이지윅 에디터는 아니지만 공부용으로 좋을것 같네요. [URL=http://de77.com/code-examples/editor2]{데모}[/URL]

[URL]http://de77.com/javascript/jquery-simple-wysiwyg-editor[/URL]

[ATTACH]574[/ATTACH]

[CODE js]function action(e,a,p)
{
/*
$(e).parents().each(function(){
var obj = $(this);
var classes = obj.attr('class').split(' ');
if ($.inArray('de77_wysiwyg', classes) > -1)
{
obj.find('.de77_editor').focus();
}
});
*/
if (p == null) p = false;
document.execCommand(a,null,p);
}[/CODE]

jQuery 를 사용하지 않는 것도 있습니다. [URL=http://de77.com/code-examples/editor]{데모}[/URL]

[URL]http://de77.com/html/how-to-make-a-wysiwyg-editor-in-javascript[/URL]

ps. 참고로 execCommand 를 지원하는 브라우저를 정리 해놓은 곳이 있습니다. [URL]http://www.quirksmode.org/dom/execCommand.html[/URL]

Prototype.js 의 Object 객체의 메소드

MintState — Tue, 19 Jan 2010 11:38:09 +0900

[U]Prototype.js 의 Object 객체의 메소드[/U]

[B]1. Object.extend[/B]
A 라는 원본 개체가 가지고 있는 프로퍼티를 B라는 대상 개체에 복사합니다. 반환은 B 를 돌려 줍니다.

[CODE js]var dog = {
sound : function(){
return 'bark bark';
}
}
var bird = {
sound : function (){
return 'jack jack';
},
fly : function(){
return 'fly fly';
}
}
Object.extend(dog, bird);
alert(dog.sound());
alert(dog.fly());[/CODE]
예제를 보시면 개에다가 새의 프로퍼티들을 복사 합니다.
개에 나는 기능이 추가되고 원본(dog) 개체가 가지고 있던 프로퍼티인 sound 가 bird 개체의 sound 로 덮어 씌워집니다.

[B]2. Object.inspect[/B]
디버그를 할수 있도록 문자열을 리턴합니다. 사실 자바스크립트 코어 메소드인 toString 을 사용할수도 있으나 toString 은 보통 개발자가 보고 싶어하는 유용한 정보를 보여주지 않습니다.
때문에 이 메소드를 사용합니다. 유저가 직접 만든 객체에도 inspect 메소드를 추가한다면 마찬가지로 노출해 줍니다.

[CODE js]var arr = [1,2];
var str = 'hello javascript';
var hash = $H({
a1 : '3',
a2 : function(){
return '4'
},
a3 : {
b1 : '1'
}
});
var userMake = {
name : 'nice guy',
inspect : function(){
return 'i am '+ this.name;
}
};
alert(Object.inspect(arr));
alert(Object.inspect(str));
alert(Object.inspect(hash));
alert(Object.inspect(userMake));[/CODE]

순서 대로 결과는
[1, 2]

'hello javascript'

# return "4";
}, 'a3': [object Object]}>

i am nice guy

를 리턴합니다. prototype.js 가 가지고 있는 개체인 Hash, Enumerable 의 내용을 확인 할수도 있습니다.

[B]3. Object.toJSON[/B]
json 형식으로 리턴합니다.

[CODE js]var arr = [1,2];
var str = 'hello javascript';
var hash = $H({
a1 : '3',
a2 : function(){
return '4'
},
a3 : {
b1 : '1'
},
a4 : [1, 2]
});
var userMake = {
name : 'nice guy',
inspect : function(){
return 'i am '+ this.name;
}
}
alert(Object.toJSON(arr));
alert(Object.toJSON(str));
alert(Object.toJSON(hash));
alert(Object.toJSON(userMake));[/CODE]

순서대로 결과는
[1, 2]

"hello javascript"

{"a1": "3", "a3": {"b1": "1"}, "a4": [1, 2]}

{"name": "nice guy"}

입니다.
Array , String , Number 형 등은 그냥 바로 리턴 해 버리고 객체 안에서의 Array, String, Number 형은 Json 의 키와 값으로 설정 됩니다.
undefined, function , unknown 등은 패스 해버립니다. (userMake 개체의 inspect 메소드를 패스해버린걸 봐도 알수 있습니다)

[B]4. Object.toQueryString[/B]
queryString 형식의 값으로 반환 합니다.
e.x) name=niceguy&height=200&weight=80

[B]5. toHTML[/B]
해당 객체의 toHTML 을 호출 합니다. toHTML 메소드가 존재 하지 않으면 Sting 의 interpret 메소드를 호출 합니다.

[CODE js]var Bookmark = Class.create({
initialize: function(name, url) {
this.name = name;
this.url = url;
},
toHTML: function() {
return '#{name}'.interpolate(this);
}
});
var api = new Bookmark('Prototype API', 'http://prototypejs.org/api');
alert(Object.toHTML(api));[/CODE]

결과는 http://prototypejs.org/api">Prototype API 입니다.

[B]6. clone[/B]
빈 개체에 개체의 프로퍼티를 복사합니다.
실제 내부적으론 Object.extend 를 사용합니다.
대상 개체의 프로퍼티를 빈객체에 복사한다 정도입니다.

[B]7. 기타[/B]
[CODE js]Object.extend = function(destination, source) {
/*
source 객체의 프로퍼티를 destination 개체의 프로퍼티로 복사 합니다.
리턴은 destination 을 돌려줍니다.
prototype.js 소스를 보시면 Array.prototype 처럼 prototype 을 복사 하기도 합니다.
*/
for (var property in source)
destination[property] = source[property];
return destination;
};

Object.extend(Object, {
inspect: function(object) {
try {
if (Object.isUndefined(object)) return 'undefined';
if (object === null) return 'null';
return object.inspect ? object.inspect() : String(object);
/*
해당 개체의 inspect 메소드가 존재하면 inspect 메소드를 뿌려주며 존재 하지 않을시 String 형으로 반환 합니다.
개발자가 생성한 객체의 경우 inspect 메소드를 지정함으로써 디버깅시 용이하게 만들수 있습니다.
*/
} catch (e) {
if (e instanceof RangeError) return '...';
throw e;
}
},

toJSON: function(object) {
var type = typeof object;
switch (type) {
case 'undefined':
case 'function':
case 'unknown': return;
case 'boolean': return object.toString();
}
/*
(undefined , function, unkown) type 일시 json 형으로 만들지 않고 넘어가며 boolean 형일경우 'true', 'false' 형의 문자로 return 해줍니다.
*/
if (object === null) return 'null';
// null 은 'null' 문자로 리턴해줍니다.
if (object.toJSON) return object.toJSON();
// 해당 객체가 toJSON 메소드가 지정되었을시 메소드를 실행한 값을 리턴해 줍니다.
if (Object.isElement(object)) return;
// nodeType 이 1 즉 속성일시 그냥 넘어갑니다.
var results = [];
for (var property in object) {
var value = Object.toJSON(object[property]);
if (!Object.isUndefined(value))
results.push(property.toJSON() + ': ' + value);
}
/*
객체가 넘어 왔을시 해당 객체를 돌면서 해당객체의 프로퍼티중 JSON 으로 쓸만한 녀석들만 배열에 넣은뒤 아래에서 JSON 타입으로 반환해 줍니다.
*/
return '{' + results.join(', ') + '}';
},
});[/CODE]

ps. 출처 : http://run2you.tistory.com/32

prototype.js 를 이용한 JSON사용 예제

MintState — Tue, 19 Jan 2010 11:02:31 +0900

[U]prototype.js 를 이용한 JSON사용 예제[/U]

아래는 JSON 사용의 간단한 예제 입니다.

[B]1번 예제[/B]
[CODE html]

JSON데이터 얻어오기

[/CODE]

json.php 파일 내용
[CODE]{"books":[
{"title": "경량데이터JSON", "author": "김성운", "publisher": "야메출판사"},
{"title": "JSON의 활용", "author": "한동열", "publisher": "노을과책"},
{"title": "XML vs JSON", "author": "홍길동", "publisher": "꽃보다책"},
]}[/CODE]

[B]2번 예제[/B]
[CODE html]

Ajax 통신

[/CODE]

json.php 파일 내용
[CODE]{"keyword": [
"가방",
"가방끝",
"가방수리",
"가방수선점"
]}[/CODE]

php 내장함수을 이용한 XML Parser

MintState — Thu, 27 Aug 2009 15:01:00 +0900

[U]php 내장함수을 이용한 XML Parser[/U]

[URL=http://kr.php.net/manual/kr/book.xml.php]php.net XML Parser[/URL] 에 보시면 자세한 설명을 보실 수 있습니다.
보통 4.3 버전 이상이면 무리없이 돌아가는것 같네요.

[CODE php]/**
*XML Parser 을 이용하여 XML을 다룬다.
*
* 자세한 설명및 레퍼런스는 http://kr.php.net/manual/kr/book.xml.php 를 참고
*/

$rXml = xml_parser_create(); // xml 파서를 생성시킨다.
$arXml = array(); // 임시 배열
$strXml = ''; // xml의 내용을 저장할 변수
/**
* file_get_contents 등의 파일 내용을 읽는 여러 함수를 이용할 수 있다.
*/
$fp = fopen('./test.xml', 'r'); // xml 파일을 읽는다.
if($fp) // 정상적으로 파일이 열렸다면
{
while (!feof($fp)) { // EOF가 될때까지
$strXml .= fread($fp, 1024); // 1024 바이트씩 읽어서 임시 변수에 넣는다.
}
fclose($fp); // 파일을 닫는다.
}
xml_parser_set_option($rXml, XML_OPTION_CASE_FOLDING, 0); // 대문자로 변경 (기본이 enable이라 disable함)
xml_parser_set_option($rXml, XML_OPTION_SKIP_WHITE, 1); // 공백값을 무시힌다.
xml_parse_into_struct($rXml, $strXml, $arXml); // 읽어들인 XML을 이용해서 배열에 XML구조를 담는다.
xml_parser_free($rXml);

$strNodeKey = null;
$arXmlAssoc = array();
// 연관배열 형식으로 하기 위해서 아래와 같이 처리
foreach ($arXml as $key => $arNode)
{
switch ($arNode['type'])
{
case 'open':
$strNodeKey = $arNode['tag'];
$arXmlAssoc[$arNode['tag']];
break;

case 'complete':
if(is_array($arNode['attributes']))
{
$arXmlAssoc[$strNodeKey][$arNode['tag']][] = array('attr' => $arNode['attributes'], 'value' => $arNode['value']);
}
else
{
$arXmlAssoc[$strNodeKey][$arNode['tag']][] = $arNode['value'];
}
break;

case 'close':
$nOpenNodeKey = null;
break;
}
}

// Echo
foreach ($arXmlAssoc['Province']['Area'] as $arElement)
{
echo $arElement['attr']['code'];
echo '=>';
echo $arElement['value'];
echo '
';
}
?>[/CODE]

XML 파싱(xml2array)

MintState — Thu, 27 Aug 2009 14:54:53 +0900

[U]XML 파싱(xml2array)[/U]

몇가지 xml parser를 찾아 봤는데 딱 마음에 드는것은 없네요..
아래는 [URL]http://www.bin-co.com/php/scripts/xml2array/[/URL] 에서 공개된 xml2array 소스입니다.

[CODE php]/**
* xml2array() will convert the given XML text to an array in the XML structure.
* Link: http://www.bin-co.com/php/scripts/xml2array/
* Arguments : $contents - The XML text
* $get_attributes - 1 or 0. If this is 1 the function will get the attributes as well as the tag values - this results in a different array structure in the return value.
* $priority - Can be 'tag' or 'attribute'. This will change the way the resulting array sturcture. For 'tag', the tags are given more importance.
* Return: The parsed XML in an array form. Use print_r() to see the resulting array structure.
* Examples: $array = xml2array(file_get_contents('feed.xml'));
* $array = xml2array(file_get_contents('feed.xml', 1, 'attribute'));
*/
function xml2array($contents, $get_attributes=1, $priority = 'tag') {
if(!$contents) return array();

if(!function_exists('xml_parser_create')) {
//print "'xml_parser_create()' function not found!";
return array();
}

//Get the XML parser of PHP - PHP must have this module for the parser to work
$parser = xml_parser_create('');
@xml_parser_set_option($parser, XML_OPTION_TARGET_ENCODING, "euc-kr"); # http://minutillo.com/steve/weblog/2004/6/17/php-xml-and-character-encodings-a-tale-of-sadness-rage-and-data-loss
xml_parser_set_option($parser, XML_OPTION_CASE_FOLDING, 0);
xml_parser_set_option($parser, XML_OPTION_SKIP_WHITE, 1);
xml_parse_into_struct($parser, trim($contents), $xml_values);
xml_parser_free($parser);

if(!$xml_values) return;//Hmm...

//Initializations
$xml_array = array();
$parents = array();
$opened_tags = array();
$arr = array();

$current = &$xml_array; //Refference

//Go through the tags.
$repeated_tag_index = array();//Multiple tags with same name will be turned into an array
foreach($xml_values as $data) {
unset($attributes,$value);//Remove existing values, or there will be trouble

//This command will extract these variables into the foreach scope
// tag(string), type(string), level(int), attributes(array).
extract($data);//We could use the array by itself, but this cooler.

$result = array();
$attributes_data = array();

if(isset($value)) {
if($priority == 'tag') $result = $value;
else $result['value'] = $value; //Put the value in a assoc array if we are in the 'Attribute' mode
}

//Set the attributes too.
if(isset($attributes) and $get_attributes) {
foreach($attributes as $attr => $val) {
if($priority == 'tag') $attributes_data[$attr] = $val;
else $result['attr'][$attr] = $val; //Set all the attributes in a array called 'attr'
}
}

//See tag status and do the needed.
if($type == "open") {//The starting of the tag ''
$parent[$level-1] = &$current;
if(!is_array($current) or (!in_array($tag, array_keys($current)))) { //Insert New tag
$current[$tag] = $result;
if($attributes_data) $current[$tag. '_attr'] = $attributes_data;
$repeated_tag_index[$tag.'_'.$level] = 1;

$current = &$current[$tag];

} else { //There was another element with the same tag name

if(isset($current[$tag][0])) {//If there is a 0th element it is already an array
$current[$tag][$repeated_tag_index[$tag.'_'.$level]] = $result;
$repeated_tag_index[$tag.'_'.$level]++;
} else {//This section will make the value an array if multiple tags with the same name appear together
$current[$tag] = array($current[$tag],$result);//This will combine the existing item and the new item together to make an array
$repeated_tag_index[$tag.'_'.$level] = 2;

if(isset($current[$tag.'_attr'])) { //The attribute of the last(0th) tag must be moved as well
$current[$tag]['0_attr'] = $current[$tag.'_attr'];
unset($current[$tag.'_attr']);
}
}
$last_item_index = $repeated_tag_index[$tag.'_'.$level]-1;
$current = &$current[$tag][$last_item_index];
}

} elseif($type == "complete") { //Tags that ends in 1 line ''
//See if the key is already taken.
if(!isset($current[$tag])) { //New Key
$current[$tag] = $result;
$repeated_tag_index[$tag.'_'.$level] = 1;
if($priority == 'tag' and $attributes_data) $current[$tag. '_attr'] = $attributes_data;

} else { //If taken, put all things inside a list(array)
if(isset($current[$tag][0]) and is_array($current[$tag])) {//If it is already an array...

// ...push the new element into that array.
$current[$tag][$repeated_tag_index[$tag.'_'.$level]] = $result;

if($priority == 'tag' and $get_attributes and $attributes_data) {
$current[$tag][$repeated_tag_index[$tag.'_'.$level] . '_attr'] = $attributes_data;
}
$repeated_tag_index[$tag.'_'.$level]++;

} else { //If it is not an array...
$current[$tag] = array($current[$tag],$result); //...Make it an array using using the existing value and the new value
$repeated_tag_index[$tag.'_'.$level] = 1;
if($priority == 'tag' and $get_attributes) {
if(isset($current[$tag.'_attr'])) { //The attribute of the last(0th) tag must be moved as well

$current[$tag]['0_attr'] = $current[$tag.'_attr'];
unset($current[$tag.'_attr']);
}

if($attributes_data) {
$current[$tag][$repeated_tag_index[$tag.'_'.$level] . '_attr'] = $attributes_data;
}
}
$repeated_tag_index[$tag.'_'.$level]++; //0 and 1 index is already taken
}
}

} elseif($type == 'close') { //End of tag ''
$current = &$parent[$level-1];
}
}

return($xml_array);
}

?>[/CODE]

[B]추가 : [/B]
괜찮은 소스가 있어서 추가 합니다. 클레스로 되어있네요.
[URL]http://www.phpbuilder.com/snippet/detail.php?id=868&type=snippet[/URL]

[CODE php]/**
* =============================================================
* The simple class for parse XML content to PHP array.
* Version : 1.0.1
* Last Upd : Thu Jan 30 14:51:18 GMT 2003
* Created By : Heiko Mundle [hmundle1@gmx.net]
* New Features: reads all attributes of a xml tag
* doesn't overwrite tags with same tag name (and same tag attribute)
*
* The simple class for parse XML content to PHP array.
* Version : 1.0
* Last Upd : Thu Oct 24 11:51:18 GMT 2002
* Created By : Phairote Charoen [phairotec@hotmail.com]
* =============================================================
* This XML content must specific some attribute for the key of record.
*
*
* xxxx
* 100
*
* more content
*
*
* Result :
*Array
*(
* [0] => Array
* (
* [name] => root
* [attr] => Array
* (
* )
* [cont] => Array
* (
* [0] => Array
* (
* [name] => item
* [attr] => Array
* (
* [id] => 1
* [class] => myclass
* )
* [cont] => Array
* (
* [0] => Array
* (
* [name] => name
* [attr] => Array
* (
* )
* [cont] => Array
* (
* [0] => xxxx
* )
* )
* [1] => Array
* (
* [name] => price
* [attr] => Array
* (
* )
* [cont] => Array
* (
* [0] => 100
* )
* )
* )
* )
* [1] => more content
* )
* )
*)
*
*/
define(WRITE_FLAG_NOT_NULL, 1);
define(WRITE_FLAG_NULL, 2);
define(WRITE_FLAG_EMPTY_ARRAY, 4);

class Xml2Array
{
/**
* The XML file name( can be also real path and web url ).
*/
var $xmlFile;
/**
* The array result from this class.
*/
var $arrResult = array();
/**
* The key stack, I keep each tag name of each level to stack array.
*/
var $keyStack = array();
/**
* Deep of stack array.
*/
var $stackIndex = 0;

/**
* The XML Parser ..
*/
var $parser;

/**
* The constructor.
* @xmlFile (string) - XML source file name
*/
function Xml2Array($xmlFile)
{
$this->xmlFile = $xmlFile;
$this->parser = xml_parser_create();
xml_set_object($this->parser, &$this);
xml_parser_set_option($this->parser, XML_OPTION_CASE_FOLDING, false);
xml_parser_set_option($this->parser, XML_OPTION_SKIP_WHITE,true);
xml_set_element_handler($this->parser, "startElement", "endElement");
xml_set_character_data_handler($this->parser, "characterData");
}

/**
* start element handler
*/
function startElement($parser, $name, $atts)
{
$name = trim($name);

$txt = "\$arr = " . $this->getArrayName($this->stackIndex) . ";";
eval($txt);

$this->keyStack[$this->stackIndex] = count($arr);
$this->stackIndex++;
$this->writeData("", WRITE_FLAG_EMPTY_ARRAY);

if(!empty($name))
{
// using the element name to array key..
$this->keyStack[$this->stackIndex] = "'name'";
$this->stackIndex++;
$this->writeData($name, WRITE_FLAG_NULL);
$this->stackIndex--;

$this->keyStack[$this->stackIndex] = "'attr'";
$this->stackIndex++;
if(!empty($atts))
{
// using the attributes to array key..
foreach($atts as $attKey => $attVal)
{
$this->keyStack[$this->stackIndex] = "'".$attKey."'";
$this->stackIndex++;
$this->writeData($attVal, WRITE_FLAG_NULL);
$this->stackIndex--;
}
}
else
{
$this->writeData("", WRITE_FLAG_EMPTY_ARRAY);
}
$this->stackIndex--;

$this->keyStack[$this->stackIndex] = "'cont'";
$this->stackIndex++;
}
}

/**
* end element handler
*/
function endElement($parser, $name)
{
$this->stackIndex-=2;
}

/**
* none tag element handler
*/
function characterData($parser, $data)
{
$data = trim($data);
if(!empty($data))
{
$txt = "\$arr = " . $this->getArrayName($this->stackIndex) . ";";
eval($txt);

$this->keyStack[$this->stackIndex] = count($arr);
$this->stackIndex++;
$this->writeData($data, WRITE_FLAG_NOT_NULL);
$this->stackIndex--;
}
}

/**
* write data in array
*/
function writeData($data, $flag)
{
$data = trim($data);
$dataStr = "\"" . $data . "\"";
switch( $flag )
{
case WRITE_FLAG_NOT_NULL:
default:
// stop if there isn't any data
if(empty($data))
break;
case WRITE_FLAG_EMPTY_ARRAY:
// overwrite default dataStr
if(empty($data))
$dataStr = "array()";
case WRITE_FLAG_NULL:
$txt = $this->getArrayName($this->stackIndex)." = ".$dataStr.";";
// assign value to the result array ..
eval($txt);

break;
}
}

/**
* get name of array
*/
function getArrayName($depth)
{
if($depth)
{
for($i=0; $i<$depth; $i++)
{
$key .= $this->keyStack[$i]."|";
}
$key = preg_replace("/\|$/", "]", $key);
$key = preg_replace("/\|/", "][", $key);
return "\$this->arrResult[".$key;
}
else
{
return "\$this->arrResult";
}
}

/**
* parsing ..
*/
function parse()
{
if (!($fp = fopen($this->xmlFile, "r")))
{
die("Could not open XML input!");
}

while ($data = fread($fp, 4096))
{
if (!xml_parse($this->parser, $data, feof($fp)))
{
die(sprintf("XML error: %s at line %d", xml_error_string(xml_get_error_code($this->parser)),xml_get_current_line_number($this->parser)));
}
}
fclose($fp);
}

/**
* @return the result array
*/
function getResult()
{
return $this->arrResult;
}

/**
* free the XML parser result ..
*/
function freeResult()
{
xml_parser_free($this->parser);
}

} // end class

?>[/CODE]

[CODE php] // Testing the clsXml2Array class.
$xmlFile = "test.xml";
$r = new clsXml2Array($xmlFile);
$r->parse();
$arrResult = $r->getResult();
$r->freeResult();

echo "

";

	print_r($arrResult);

	echo "

";
?>[/CODE]

ajax의 xml을 javascript 객체형식으로 자동 변환

MintState — Tue, 07 Jul 2009 13:41:01 +0900

[U]ajax의 xml을 javascript 객체형식으로 자동 변환[/U]

[CODE js]/**
* Author : MC 심새 (ganer9r@naver.com)
* Make Date : 2006-09-22
* comment : ajax의 xml을 javascript 객체형식으로 자동 변환
**/

/* Ajax 사용을 위한 기본 콤포넌트 Start */
function AjaxDataControl(){
this.xmlHttp = null;

this.getHttpRequest = function(URL, object){
var xmlHttp = this.xmlHttp;
var xmlData = null;
// FF일 경우 window.XMLHttpRequest 객체가 존재한다.
if(!xmlHttp){
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
this.xmlHttp = xmlHttp;
}

xmlHttp.open('GET', URL, true);
xmlHttp.onreadystatechange = function() {
// readyState 가 4 고 status 가 200 일 경우 올바르게 가져옴
if(xmlHttp.readyState==4 && xmlHttp.status == 200 && xmlHttp.statusText=='OK') {
var xmlData = xmlHttp.responseXML;
object.setXmlData(xmlData);

}
}

xmlHttp.send('');

}

this.getXmlRootNode = function(nodes, rootName){
var rootNode = nodes.getElementsByTagName(rootName);

return rootNode;
}
}
/* Ajax 사용을 위한 기본 콤포넌트 End */

/* Ajax에서 리턴받은 XML NODE를 JAVASCRIPT OBJECT 형식으로 변환 Start */
function AjaxObject(){
this.ac = null;
this.xmlData = null;
this.rootName = null;
this.functionName = null;
this.arguments = new Array();

this.inArray = function(array, value){
var result = false;

for(var i=0; i < array.length; i++){
if(array[i] == value){
result = true;
break;
}
}

return result;
}

this.getHttpRequest = function(Url, functionName){
if(this.ac == null){
this.ac = new AjaxDataControl();
}
this.functionName = functionName;

for(var i=2; i this.arguments.push(arguments[i]);
}

this.ac.getHttpRequest(Url, this);
}

this.setMakeObject = function(nodeData){
var resultObject = new Object;
resultObject.length = 0;

if(nodeData.hasChildNodes() ){
var nodeChilds = nodeData.childNodes;
var nodeNameList = new Array();
var isNodeChilds = false;

for(var i = 0; i
if(nodeChilds[i].nodeType == '1'){

var returnObj = this.setMakeObject(nodeChilds[i] );

if( typeof(returnObj) == "string"){
resultObject[ nodeChilds[i].nodeName ] = this.setMakeObject(nodeChilds[i] );
resultObject.length += 1;
}else{

if(resultObject[ nodeChilds[i].nodeName ]){
resultObject[ nodeChilds[i].nodeName ].push( returnObj );
}else{
resultObject[ nodeChilds[i].nodeName ] = new Array();
resultObject[ nodeChilds[i].nodeName ].push( returnObj );

resultObject.length += 1;
}
}
isNodeChilds = true;

}
}

if(!isNodeChilds){
resultObject = nodeChilds[0].nodeValue;
}else{

}
}

return resultObject;
}

this.setMakeControl = function(){
if(this.xmlData != null){
var rootNode = this.ac.getXmlRootNode(this.xmlData, this.rootName);
var list = this.setMakeObject(rootNode[0]);
var args = "";

for(var i=0; i args += ", this.arguments["+i+"]";
}

eval( this.functionName+"(list "+args+")" );
}
}

this.setXmlData = function(data){
this.xmlData = data;
this.rootName = data.documentElement.nodeName;

this.setMakeControl();
}

}
/* Ajax에서 리턴받은 XML NODE를 JAVASCRIPT OBJECT 형식으로 변환 End */

/* 사용법 Start*/
// var aObj = new AjaxObject; // AjaxList 선언
// aObj.getHttpRequest("test.xml", "displayBoardList", [인자값]); //참조Url, 리턴 함수명
// 리턴 함수에는 obj를 받을 인자 필수!!!
//
// 리턴 함수에, 변환된 데이터 이외의 인자를 받고 싶으면 계속 이어서 쓰세요
// 예] aObj.getHttpRequest("test.xml", "displayBoardList", "test", 1, "all", ... );
/* 사용법 End */[/CODE]

Google Maps API

MintState — Wed, 18 Mar 2009 13:13:37 +0900

[U]Google Maps API[/U]

본 내용은 http://www.joinc.co.kr/modules/moniwiki/wiki.php/Site/Google/Service/GoogleMapAPI 을 정리한 것입니다.

Google Map을 사용하기 위해서는 Map Key를 발급 받아야 합니다.
Key는 [URL=http://www.google.com/apis/maps]http://www.google.com/apis/maps[/URL] 에서 받으실 수 있습니다.

Google Map은 우선 google Maps Javascript를 명시해야 합니다. 이때 발급 받은 Map Key를 적으시면 됩니다.
[CODE html][/CODE]

[B]1. 기본[/B]
구글 Map을 불러오기 위한 가장 기본이 되는코드다. 서울주변을 보여준다.
[CODE js]var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);[/CODE]

setCenter을 이용해서 보여줄 위치를 지정한다. 첫번째 인자는 좌표를 지정하기 위해서 사용한다. 두번째 인자는 지도의 해상도를 결정하기 위해서 사용한다. 숫자가 클 수록 더 자세한 결과를 보여준다.

예제 : simple.html

구글 맵은 [COLOR=blue]맵, 위성, 합성[/COLOR]의 3가지 모드를 제공된다. [COLOR=blue]setMapType[/COLOR]메서드를 이용하면 모드를 변경할 수 있다. 따로 지정하지 않을 경우 [COLOR=blue]맵[/COLOR]모드로 실행된다.
[LIST]
[*]setMapType(G_SATELLITE_TYPE) : 위성모드
[*]setMapType(G_HYBRID_TYPE) : 합성모드
[/LIST:u]

[B]2. Map에서의 이동[/B]
다음은 맵에서 중심을 이동하는 예제다. [COLOR=blue]panTo[/COLOR] 메서드를 이용하면 해당 중심으로 지도를 부드럽게 이동시킨다. 길찾기등의 기능구현에 유용하게 사용할 수 있을 거 같다.
[CODE js]var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);
window.setTimeout(function() {
map.panTo(new GLatLng(42.615527631349245, 128.353515625));
}, 2000);[/CODE]

예제 : animate.html

[B]3. Control 버튼 추가하기[/B]
맵을 확대기시커나 모드를 바꾸거나 하는등의 제어를 위한 컨트롤 버튼을 추가한다.
[CODE js]var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);[/CODE]

예제 : control.html

[B]4. Event Listener[/B]
event listener는 [COLOR=blue]GEvent.addListener[/COLOR]를 호출해서 생성한다. 이것은 맵에서 발생하는 이벤트를 알려준다. 아래의 예제에서 맵을 움직일 경우 변경된 좌표가 출력되는걸 확인할 수 있을 것이다.
[CODE js]var map = new GMap2(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);[/CODE]

예제 : event.html

[B]5. 정보창 열기[/B]
[COLOR=blue]openInfoWindow[/COLOR]를 이용하면 원하는 지역에 [COLOR=blue]DOM[/COLOR]정보를 출력할 수 있다. 다음은 맵중앙에 "저는 여기에 살아요"메시지를 출력하는 코드다.
[CODE js]map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);
map.openInfoWindow(map.getCenter(), document.createTextNode("저는 여기에 살아요"));[/CODE]

예제 : infowindow.html

[B]6. 맵에 표시하기[/B]
이번 예제는 overlay기능을 이용해서 지도에 랜덤하게 10개의 마크를 표시한다. 마크에 사용되는 이미지는 기본 이미지이며, 사용자 정의 아이콘을 만들 수도 있다. 일본의 동경시를 기준으로 예제를 만들었다.
[CODE js]map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();

// 랜덤 포인트를 만들고 각각의 포인트에 마킹을 한다.
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
// 랜덤 포인트를 만들고 이것을 연결한다.
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));[/CODE]

예제 : overlay.html

[B]7. 클릭 이벤트 제어[/B]
맵에 클릭을 할경우 이벤트를 받아서 마킹을 하는 예제다. 앞서 배웠던 [COLOR=blue]addListenr[/COLOR]메서드를 이용해서 click 이벤트를 기다리고, 클릭이 발생하면 [COLOR=blue]addOverlay[/COLOR]메서드를 이용해서 마킹을 한다.
[CODE js]map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});[/CODE]

예제 : click.html

[B]8. 마커에 정보 창 출력하기[/B]
10개의 마커를 랜덤하게 표시하고, 마커를 클릭하면 클릭이벤트에 대한 Listener가 작동하도록 해보자. Listener 함수는 [COLOR=blue]openInfoWindowHtml[/COLOR]메서드를 이용해서 정보창을 출력한다.
[CODE js]var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #" + number + "");
});
return marker;
}

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}[/CODE]

예제 : markerinfo.html

[B]9. 탭 사용하기[/B]
[COLOR=blue]openInfoWindowsTabs[/COLOR]메서드 와 [COLOR=blue]GInfoWindowTab[/COLOR]클래스를 이용하면, 탭을 제어할 수 있다. 다음 예제는 마커를 클릭하면 2개의 tab을 가진 Info Windows를 띄운다.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var infoTabs = [
new GInfoWindowTab("탭1", "안녕하세요.
"),
new GInfoWindowTab("탭2", "반갑습니다.")
];

var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);

예제 : tab.html

[B]10. 사용자 정의 아이콘 사용하기[/B]
사용자 정의 아이콘을 사용하는 예제다. 아이콘은 구글에서 제공하는 [COLOR=blue]mini marker[/COLOR]이미지들을 사용하기로 했다. 완전한 사용자 정의 아이콘을 만들기 위해서는 원본이미지와 함께 [COLOR=blue]그림자 이미지[/COLOR]가 쌍으로 준비되어야 한다.
[CODE js]var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// 10개의 랜덤위치를 찾아서 marking한다.
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point, icon));
}[/CODE]

예제 : icon.html

[B]11. 아이콘 클래스 사용하기[/B]
지도서비스를 하게 된다면, 여러개의 아이콘들이 사용될 것이다. [COLOR=blue]GIcon[/COLOR]클래스를 이용하면 아이콘을 쉽게 관리할 수 있다.
[CODE js]var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// 아이콘에서 사용할 이미지/그림자 이미지, Info Windows등 객체의
// 속성을 결정한다.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

function createMarker(point, index) {
// Create a lettered icon for this point using our icon class
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var icon = new GIcon(baseIcon);
icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
var marker = new GMarker(point, icon);

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("지역 " + letter + "");
});
return marker;
}

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i));
}[/CODE]

예제 : iconclass.html

[B]12. 마커 드래그[/B]
마커는 클릭, 다른장소로의 드래그 등이 가능한 상호작용하는 객체다. 이 예제는 맵에서 마커를 클릭하고 드래그하는 이벤트를 처리하는 방법을 알려준다. 드래그는 [COLOR=blue]click, dragstart, drag, dragend[/COLOR]의 4가지 타입의 이벤트를 발생한다.
[CODE js]var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(37.51025350131836, 127.06023216247559);
map.setCenter(center, 16);
map.setMapType(G_SATELLITE_MAP);

var marker = new GMarker(center, {draggable: true});

GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});

GEvent.addListener(marker, "dragend", function() {
map.openInfoWindowHtml("여기를 약속장소로...");
});

map.addOverlay(marker);[/CODE]

예제 : drag.html

[B]13. SideBar를 통한 맵 링크[/B]
[URL=http://maps.google.co.kr/]Google Map[/URL]에서 검색을 해보면 지도 옆에 SideBar를 통해서 맵을 제어하는 걸 볼수 있다. 여기에서는 SideBar를 이용해서 map을 제어하는 방법에 대해서 알아보겠다.
[CODE js]// 이 변수에 side bar에 이벤트가 발생했을 때 출력할 HTML코드가 저장된다.
var side_bar_html = "";

// side bar에는 여러개의 마커에 대한 HTML요소가 사용될 수 있으므로
// 배열로 정의 된다.
var gmarkers = [];
var htmls = [];
var i = 0;
/*
var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(37.51030456483467, 127.05190658569336);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(center, 14);
*/

function createMarker(point, name, html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
gmarkers[i] = marker;
htmls[i] = html;
side_bar_html += '' + name + '
';
i++;
return marker;
}

function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336),14);
map.setMapType(G_SATELLITE_MAP);

// 테스트에 사용할 point를 만들자.
var point = new GLatLng(37.508500299402435, 127.06263542175293);
var marker = createMarker(point, "반디엔 루인스", "제가 애용하는 서점 입니다");
map.addOverlay(marker);

var point = new GLatLng(37.50209991181568, 127.03652143478394);
var marker = createMarker(point, "시티문고", "가끔 강남에 갈일이 있으면 시간을 때우는 장소로..");
map.addOverlay(marker);

var point = new GLatLng(37.517802011991854, 127.0405125617981);
var marker = createMarker(point, "로터리 오락실", "드럼메니아 V2때문에 갑니다");
map.addOverlay(marker);

var point = new GLatLng(37.5056235973398, 127.0512306690216);
var marker = createMarker(point, "onnet", "제가 다니는 회사지요");
map.addOverlay(marker);

//

side_bar에 side_bar_html 문서를 배치한다.
document.getElementById("side_bar").innerHTML = side_bar_html;[/CODE]

예제 : sidebar.html

[B]14. XML과 비동기 HTTP를 이용한 지도 생성[/B]
이번 예제는 경도/위도와 지역정보를 포함한 [COLOR=blue]async_data.xml[/COLOR]을 다운로드 받아서, 지도에 마커를 표시한다. [COLOR=blue]GDownloadUrl[/COLOR]메서드를 이용해서 파일을 다운로드 받을 수 있다. 다운로드 받은 XML파일은 [COLOR=blue]GXml[/COLOR]메서드를 이용해서 처리한다. 마커를 클릭하면 지역정보가 표시된다.
[CODE js]function load() {
var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(37.51030456483467, 127.05190658569336);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(center, 14);
map.setMapType(G_SATELLITE_MAP);

function createMarker(point, name) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("" + name + "");
});
return marker;
}

GDownloadUrl("async_data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(point));
map.addOverlay(createMarker(point, markers[i].getAttribute("name")));
}
});
}[/CODE]

다음은 async_data.xml의 내용이다.
[CODE]

[/CODE]

예제 : async.html

[B]* 관련 링크[/B]
[URL]http://mapki.com[/URL]
[URL]http://econym.org.uk/gmap/[/URL] -> 위의 예제가 거의다 이 사이트에 존재 합니다.

==================================================================================
[B]* 예제 모음[/B]
[URL=http://www.google.com/uds/solutions/wizards/mapsearch.html]Map Search Wizard - Put a Searchable Map on Your Web Page[/URL] 는 쉽게 자신의 홈페이지에 Google Map을 달 수 있도록 코드를 생성해 줍니다.
[ATTACH]433[/ATTACH]