2016年9月5日 星期一

Google Map 設計


1.沿路動畫
http://stackoverflow.com/questions/11519386/animate-a-route-with-google-map-js-api-v3

https://developers.google.com/maps/documentation/javascript/examples/polyline-simple
2.雙模式
https://developers.google.com/maps/documentation/javascript/examples/streetview-simple

 https://developers.google.com/maps/documentation/javascript/examples/streetview-simple?hl=zh-tw

http://alves.im/gmaps-animated-route/


3.設定地圖的畫面位置(Drag):
var mapOptions = {
    center: new google.maps.LatLng(45, -122),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
                              mapOptions);

function moveToLocation(lat, lng){
    var center = new google.maps.LatLng(lat, lng);
    map.panTo(center);  //重點!
}
$('#recenter').click( function() {
    moveToLocation( -34, 150 );
});

藝術材質

1.飯店磚塊
Ledgestone

2016年9月2日 星期五

temp

http://www.nodebeginner.org/index-zh-tw.html

案/tmp/test.png內容展示到瀏覽器中。當然了,首先需要將該圖片儲存到這個位置

2016年8月31日 星期三

Ubuntu 14.04

1.安裝google chrome
http://www.computernetworkingnotes.com/ubuntu-12-04-tips-and-tricks/how-to-run-chrome-as-root-user-in-ubuntu.html

2016年8月30日 星期二

NodeJS 教學

1.安裝nodejs
sudo apt-get install node

https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-an-ubuntu-14-04-server

1-2 支援模組 Express
https://expressjs.com/en/guide/routing.html

2.範例

file upload
https://codeforgeek.com/2014/11/file-uploads-using-node-js/

chat room
http://socket.io/get-started/chat/

3.async
http://book.mixu.net/node/ch7.html

Z.安裝模組與使用

npm install formidable
var formidable = require("formidable");

2016年8月29日 星期一

SVG範例

1.動畫設計(SVG)-
https://css-tricks.com/guide-svg-animations-smil/

https://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_animation

http://interactjs.io/

http://svg.dabbles.info/snaptut-dragplugin

http://www.jqueryrain.com/?OQTEB5Jx


http://tympanus.net/codrops/2016/04/13/interactive-3d-mall-map/  多層地圖


2.觸發動畫-

http://stackoverflow.com/questions/8455773/svg-trigger-animation-with-event

http://web.archive.org/web/20140228202850/http://dev.opera.com/articles/view/advanced-svg-animation-techniques

http://stackoverflow.com/questions/31856890/svg-trigger-a-click-event-on-animatetransform-after-clicking-a-button?answertab=votes#tab-top

http://www.hongkiat.com/blog/svg-animations/

居家生活

1.滅蟑文章
  http://www.letu.life/b5/125663/%E8%9F%91%E8%9E%82%E4%B8%80%E6%AC%A1%E7%94%A2%E5%8D%B5%E6%95%B8%E7%99%BE%E9%9A%BB%EF%BC%8C%E4%BD%A0%E5%AE%B6%E5%BA%8A%E5%BA%95%E4%B8%80%E5%AE%9A%E6%9C%89%EF%BC%81%E3%80%8C%E5%B9%BE%E6%8B%9B%E3%80%8D/