東証の写真
file_get_contentsで取得した画像を、指定のフォルダに名前を付けて画像に置き換えます。
<?php $img = '01.jpeg'; $data = file_get_contents($img); $pass='img/sec.jpg'; file_put_contents($pass,$data); ?>
実行すると、ファイルが出来ています。$imgのパスは外部サーバーでも同じです。
gif-> jpgでもできました。
随机应变 ABCD: Always Be Coding and … : хороший
東証の写真
file_get_contentsで取得した画像を、指定のフォルダに名前を付けて画像に置き換えます。
<?php $img = '01.jpeg'; $data = file_get_contents($img); $pass='img/sec.jpg'; file_put_contents($pass,$data); ?>
実行すると、ファイルが出来ています。$imgのパスは外部サーバーでも同じです。
gif-> jpgでもできました。
まず、mysqlにデータを入れます。
mysql> insert into kabuki(name, lat, lng) values('歌舞伎町店', '35.6969674', '139.700469'); Query OK, 1 row affected (0.10 sec) mysql> select * from kabuki; +-----------------+-----------+------------+ | name | lat | lng | +-----------------+-----------+------------+ | 歌舞伎町店 | 35.696967 | 139.700469 | +-----------------+-----------+------------+ 1 row in set (0.05 sec)
pdo exec(‘TRUNCATE TABLE kabuki’)でデータを削除します。
<?php $dsn = "mysql:dbname=map;host=localhost"; $user = "hoge"; $password = "hogehoge"; try { $dbh = new PDO($dsn, $user, $password); } catch (PDOException $e){ print('connection failed:'.$e->getMessage()); } $dbh->exec('TRUNCATE TABLE kabuki'); ?>
削除されてますね。
mysql> select * from kabuki; Empty set (0.10 sec)
これは駄目だ。。本家(google)に勝てない。あかんわ。
<?php $uri = "http://api.gnavi.co.jp/RestSearchAPI/20150630/"; $acckey = "donot watch"; $format="json"; $lat = 35.6952455; $lon = 139.704177; $range = 2; $url = sprintf("%s%s%s%s%s%s%s%s%s%s%s%s", $uri, "?format=", $format, "&keyid=", $acckey, "&latitude=", $lat,"&longitude=",$lon,"&range=",$range,"&hit_per_page=100"); // print_r($url); $json = file_get_contents($url); $obj = json_decode($json); foreach($obj->rest as $value){ $name[] = $value->name; $cate[] = $value->category; $glat[] = $value->latitude; $glng[] = $value->longitude; $gurl[] = $value->url; } // print_r('<pre>'); // var_dump($obj); // print_r('</pre>'); $glat = json_encode($glat); $glng = json_encode($glng); $shop = json_encode($name); $cate = json_encode($cate); $url = json_encode($gurl); ?> <style> #ginza { height: 70%; width: 100%; font-size:small; } html, body { height: 100%; margin: 0; padding: 0; } </style> 繁華街<br> 新宿 歌舞伎町 風鈴会館周辺 <div id="ginza"></div> <script> var map; var marker = []; var infoWindow = []; var icon00 = 'img/00.png';var icon01 = 'img/01.png';var icon02 = 'img/02.png';var icon03 = 'img/03.png';var icon04 = 'img/04.png';var icon05 = 'img/05.png';var icon06 = 'img/06.png';var icon07 = 'img/07.png';var icon08 = 'img/08.png';var icon09 = 'img/09.png';var icon10 = 'img/10.png';var icon11 = 'img/11.png';var icon12 = 'img/12.png';var icon13 = 'img/13.png';var icon14 = 'img/14.png';var icon15 = 'img/15.png';var icon16 = 'img/16.png';var icon17 = 'img/17.png';var icon18 = 'img/18.png';var icon19 = 'img/19.png';var icon20 = 'img/20.png';var icon21 = 'img/21.png'; function initMap(){ var mapLatLng = new google.maps.LatLng({ lat: <?php echo $lat; ?>, lng: <?php echo $lon; ?>}); map = new google.maps.Map(document.getElementById('ginza'),{ center: mapLatLng, zoom: 19 }); var lat_array = JSON.parse('<?php echo $glat; ?>'); var lng_array = JSON.parse('<?php echo $glng; ?>'); var shop = JSON.parse('<?php echo $shop; ?>'); var cate = JSON.parse('<?php echo $cate; ?>'); var url = JSON.parse('<?php echo $url; ?>'); console.log(lng_array); for(var i=0; i < 101; i++){ markerLatLng = new google.maps.LatLng({lat: Number(lat_array[i]), lng: Number(lng_array[i])}); marker[i] = new google.maps.Marker({ position: markerLatLng, label: shop[i], map: map }); infoWindow[i] = new google.maps.InfoWindow({ content: '<a href="' + url[i]+ '">' + shop[i] + '</a>' }); switch (cate[i]){ case '居酒屋':case'日本酒バー':case'晩酌居酒屋':case'和食寿司居酒屋/酒場':marker[i].setOptions({icon: {url: icon00}});break; case 'カフェ':marker[i].setOptions({icon: {url: icon01}});break; case 'バー':case'ワイン':case'パワーストーンバー':case'ダイニングバー':case'大人の隠れ家バー':case'カフェダイニング バー':case'シャンパン・ワイン':marker[i].setOptions({icon: {url: icon02}});break; case 'そば':marker[i].setOptions({icon: {url: icon03}});break; case 'ラーメン':marker[i].setOptions({icon: {url: icon04}});break; case '日本料理':case'創作料理':case'旬の串揚げ・和食':case'小料理':case'鮨 和食':case'鮨 和食':marker[i].setOptions({icon: {url: icon05}});break; case '寿司':case'寿司屋':marker[i].setOptions({icon: {url: icon06}});break; case '天ぷら':marker[i].setOptions({icon: {url: icon07}});break; case '海鮮料理':marker[i].setOptions({icon: {url: icon08}});break; case 'おでん':case'焼鳥 鶏料理':case'焼き鳥':marker[i].setOptions({icon: {url: icon09}});break; case 'お好み焼き':marker[i].setOptions({icon: {url: icon10}});break; case 'カレー':marker[i].setOptions({icon: {url: icon11}});break; case 'イタリアン':case'薪焼きイタリアン':marker[i].setOptions({icon: {url: icon12}});break; case '中華料理':marker[i].setOptions({icon: {url: icon13}});break; case 'タイ料理':case'ベトナム料理':case'ネパール料理':marker[i].setOptions({icon: {url: icon14}});break; case 'フレンチ':case'ビストロ':case'ワインビストロ':case'フレンチ ビストロ':case'鉄板焼きダイニング':case'フレンチレストラン':marker[i].setOptions({icon: {url: icon15}});break; case '焼肉':case'野菜×鉄板焼き':case'ホルモン':case'鉄板鍋・牛タン・ワイン':marker[i].setOptions({icon: {url: icon16}});break; case 'ハンバーガー':marker[i].setOptions({icon: {url: icon17}});break; case 'デザート':case'和菓子':case'パンケーキカフェ':marker[i].setOptions({icon: {url: icon18}});break; default:marker[i].setOptions({icon: {url: icon19}});break; } markerEvent(i); } } function markerEvent(i){ marker[i].addListener('click', function(){ infoWindow[i].open(map, marker[i]); }); } </script>
phpからjavascriptに配列を渡します。
var lat_array = JSON.parse('<?php echo $lat; ?>'); var lng_array = JSON.parse('<?php echo $lng; ?>'); console.log(lng_array);
コンサル会社で、外資系のコンサルだけアイコンを変えてみます。
アイコンはsetOptionで変えます。
setOptions({
icon: {
url: icon
}
});
var map; var marker = []; var infoWindow = []; var icon = 'icon.png'; var markerData = [ { name: 'マッキンゼー', ref: '外資', lat: 35.6636921, lng: 139.7418055 }, { name: 'ベイン', ref: '外資', lat: 35.6661276, lng: 139.7312397 }, { name: 'アビーム', ref: '外資', lat: 35.6844514, lng: 139.764942 }, { name: 'ボスコン', ref: '外資', lat: 35.6811759, lng: 139.734872 }, { name: '野村総研', ref: '国内', lat: 35.6884676, lng: 139.7645002 }, { name: 'MUFJリサーチ', ref: '国内', lat: 35.6618341, lng: 139.7443247 } ]; function initMap(){ var mapLatLng = new google.maps.LatLng({ lat: markerData[0]['lat'], lng: markerData[0]['lng']}); map = new google.maps.Map(document.getElementById('sample'),{ center: mapLatLng, zoom: 14 }); for(var i=0; i < markerData.length; i++){ markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); marker[i] = new google.maps.Marker({ position: markerLatLng, map: map }); infoWindow[i] = new google.maps.InfoWindow({ content: '<div class="sample">' + markerData[i]['name'] + '</div>' }); if(markerData[i]['ref'] == '外資'){ marker[i].setOptions({ icon: { url: icon } }); } markerEvent(i); } } function markerEvent(i){ marker[i].addListener('click', function(){ infoWindow[i].open(map, marker[i]); }); }
なるほど、大分わかってきましたね。
読み取り専用のNavigator.geolocationは、ウェブコンテンツがデバイスの位置情報にアクセスするためのGeolocationオブジェクトを返す。
<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> #map { height: 50%; margin-top: 10px; } html, body { height: 100%; margin: 10px; padding: 0; } </style> </head> <body> <div id="map"></div> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 2 }); var infoWindow = new google.maps.InfoWindow({map: map}); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; infoWindow.setPosition(pos); infoWindow.setContent('Location found.'); map.setCenter(pos); }, function() { handleLocationError(true, infoWindow, map.getCenter()); }); } else { handleLocationError(false, infoWindow, map.getCenter()); } } function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos); infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.'); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"> </script> </body> </html>
一通り終わったと思ったらこれか?
なるほど、navigator.geolocation.getCurrentPositionで位置情報を取得していますね。
<script> var options = { enableHighAccuracy : true, timeout: 5000, maximumAge: 0 }; function success(pos){ var crd = pos.coords; console.log('your current position is:'); console.log('latitude : ' + crd.latitude); console.log('longitude: ' + crd.longitude); console.log('More or less ' + crd.accuracy + ' meters'); }; function error(err){ console.warn('ERROR(' + err.code + '):' + err.message); }; navigator.geolocation.getCurrentPosition(success, error, options); </script>
つくってる人凄すぎてコーディングが嫌になるな。。
<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> #map { height: 50%; margin-top: 10px; } html, body { height: 100%; margin: 10px; padding: 0; } </style> </head> <body> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 2, center: {lat: -33.865427, lng: 151.196123}, mapTypeId: 'terrain' }); var script = document.createElement('script'); script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js'; document.getElementsByTagName('head')[0].appendChild(script); } function eqfeed_callback(results) { var heatmapData = []; for (var i = 0; i < results.features.length; i++) { var coords = results.features[i].geometry.coordinates; var latLng = new google.maps.LatLng(coords[1], coords[0]); heatmapData.push(latLng); } var heatmap = new google.maps.visualization.HeatmapLayer({ data: heatmapData, dissipating: false, map: map }); } // // window.eqfeed_callback = function(results) { // // for (var i = 0; i < results.features.length; i++) { // // var coords = results.features[i].geometry.coordinates; // // var latLng = new google.maps.LatLng(coords[1],coords[0]); // // var marker = new google.maps.Marker({ // // position: latLng, // // map: map // // }); // // } // } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=hoge&libraries=visualization&callback=initMap"> </script> </body> </html>
lengthをもっている配列ではないオブジェクトのforEach
Array.prototype.forEach.call(document.querySelectorAll('span'),function(node){ console.log(node); });
Array.prototype.forEach()
与えられた関数を、配列の各要素に対して一度ずつ実行します。
function logArrayElement(element, index, array){ console.log("a[" + index + "] = " + element); } [2, 5, 9].forEach(logArrayElements);
google.maps.LatLng
LatLngクラスは位置座標のインスタンスを作成するためのクラス。
var latLng = new google.maps.LatLng(35.71, 139.8107, false)
google.maps.Marker
マーカー(アイコン)
var marker = new google.maps.Marker({ map: _map, position: new google.maps.LatLng(35.693235, 139.757864), animation: google.maps.Animation.DROP });
parseFloat
引数として与えられた文字列を解析して浮動小数点数を返す。
InfoWindow.setContent()はInfoWindowクラスのメソッド
infoWindowはそのままですが、情報ウィンドウ
var infoWindow = new google.maps.InfoWindow({ position: new google.maps.LatLng( 35.708194, 139.808565 ) , content: "SYNCER" , }); infoWindow.open(map); infoWindow.setContent("Hello!!");
open: 新しい副ブラウザウィンドウを生成し、参照されているリソースをロード
var win = window.open(url, name)
失敗した場合、var winはnull
var win; var features = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"; { win = window.open("http://www.cnn.com/", "cnn", features); }
XMLHttpRequestはサーバーに対してHTTPリクエストを発行するオブジェクト。ブラウザを更新しない。
firefox, operaの場合は、単にXMLHttpRequestクラスのオブジェクトを作るだけだが、IE6はActiveXObjectとして作成しなければならない。
ActiveXObject :
オートメーション オブジェクトへの参照を有効にして返します。
newObj = new ActiveXObject(servername.typename[, location])
ActiveXのXMLHTTPのバージョン: Msxml2.XMLHTTP, Microsoft.XMLHTTP
new ActiveXObject(‘Msxml2.XMLHTTP’);
new ActiveXObject(‘Microsoft.XMLHTTP’);
「readyState」プロパティはサーバからデータを受信するたびに値の更新が行われます。よってこの値を監視することでデータの受信が完了したかどうかを判別できます。
「readyState」プロパティの値が変化すると「onreadystatechange」イベントが発生します。そこで「onreadystatechange」イベント発生する度にチェックする関数を呼び出し、データの受信が完了していたらデータを表示する。
function checkStatus(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
alert(xmlHttp.responseText);
}
}
httpRequest = false; if(window.XMLHttpRequest){ httpRequest = new XMLHttpReqeust(); httpRequest.overrideMimeType('text/xml'); } else if(window.ActiveXObject){ try { httpRequest = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e){ httpRequest = new ActiveXObject('Microsoft.XMLHTTP'); } } function request(page){ if(page == "") return; httpRequest.abort(); httpRequest.open('GET', 'http//webos-goodies.jp/archives/' + page+ '.html', true); httpRequest.onreadystatechange = function(){ if(httpRequest.readyState == 4){ if(httpRequest.status == 200){ document.getElementById('page_text').value = httpRequest.responseText; } } } httpRequest.send(null); }