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 );
});

沒有留言:

張貼留言