google map に現在地の標高を表示するグリモンを作った
LatLng2Height::緯度経度から標高算出API
こちらのAPIに感化されて作ってみました。
そもそも↑のサイト様ですでに実装できているものだけど、勉強の意味もこめてグリモン化
あと、jsonpを使ってみたかった。
ソース
// ==UserScript== // @name height with google map // @namespace http://ryoff.com/ // @include http://maps.google.* // ==/UserScript== (function() { //初期設定 document.getElementById('map').addEventListener("mousemove", check_trigger, false); var point = ""; var nowLoading = 0; var liEle = document.createElement("li"); liEle.setAttribute("id","heightViewErea"); liEle.style.position = "relative"; liEle.style.top = "1px"; document.getElementById('links').firstChild.insertBefore(liEle, document.getElementById('links').firstChild.firstChild); function check_trigger() { if (nowLoading == 1) { return false; } if (document.getElementById('link').href.match(/\&ll\=([0-9\.]+,[0-9\.]+)/)) { var nowPoint = RegExp.$1; if (point == nowPoint) { return false; } else { nowLoading = 1; point = nowPoint; document.getElementById("heightViewErea").innerHTML = " loading... "; get_height_by_api(nowPoint); } } } function get_height_by_api(nowPoint) { var url = "http://lab.uribou.net/ll2h/?ll=" + nowPoint + "&jsonp=view_height"; GM_xmlhttpRequest({method: "GET", url: url, onload: function(res) { eval('(' + res.responseText + ')'); }}); } function view_height(api_json) { if (api_json["error"] == 0) { height2html(api_json["height"]); } termination(); } function height2html(height) { document.getElementById("heightViewErea").innerHTML = height + " M "; } function termination() { nowLoading = 0; return false; } })();
う〜ん。
APIでjsonpを利用する場合、call_back 関数をして出来るらしいんだけど、グリモンでGM_xmlhttpRequestを使用しても、call_back関数を指定できるので、どっちを使えばいいのか分からなかった。
結局、GM_xmlhttpRequestで受け取ったものを eval() してすぐに API の引数で指定した call back 関数に投げて、function termination() 内で return false するという苦肉の策。
う〜む。
jsonpに関してはもっと勉強したい。