google map 街景 api 實作範例
在前幾個禮拜，google己經把全台灣"部份"地區的街景都上架了~~
雖說還不是很完全，但己經有"高雄地區"了，剛好筆者是住高雄，就引起我的興趣了!!
那麼就來實作google map 街景的 api 來玩玩吧~~XD
規劃如下：
1.地圖點到哪，街景就即時顯示到哪~
(google目前搜完地址，還要把小人拉到地圖中街景才顯示，尤其筆者很不會拉小人常常拉不準)
2.每個地址都有唯一的網址，這樣才可以做分享，並且縮短網址
在同一個地址的情況下，google網址為
http://maps.google.com.tw/maps?f=q&source=s_q&hl=zh-TW&geocode=&q=%E9%AB%98%E9%9B%84%E5%B8%82%E6%B0%91%E6%AC%8A%E4%BA%8C%E8%B7%AF6%E8%99%9F&sll=22.622837,120.358065&sspn=0.0123,0.032895&brcurrent=3,0x346e03125ee30365:0xdcfb33e1848b46df,0,0x346e04bf6cb74463:0xd266fce264dae085&ie=UTF8&hq=&hnear=806%E9%AB%98%E9%9B%84%E5%B8%82%E5%89%8D%E9%8E%AE%E5%8D%80%E6%B0%91%E6%AC%8A%E4%BA%8C%E8%B7%AF6%E8%99%9F&z=16&layer=c&cbll=22.605193,120.30945&panoid=0J8XNQFxdf7FjYLoYpHvMA&cbp=12,53.07,,0,4.77
筆者程式的網址為 http://blog.doremicat.com/map.php?address=%E9%AB%98%E9%9B%84%E5%B8%82%E6%B0%91%E6%AC%8A%E4%BA%8C%E8%B7%AF6%E8%99%9F
這是因為google有把一些參數連同帶到裡面，但基於一般user根本不需要太煩雜的url
3.提供街景地圖及一般地圖兩種
4.中文地址 轉換為 經緯度
5.可同時分享到社群網站
範例程式網址，大家可以玩看看!!
(我初始地點定位在往台東的南迴公路上)
本程式參考自 Google地圖 API 參考文件
這次 街景 的主要類別為 GStreetviewPanorama 並呼叫 setLocationAndPOV
主要程式碼如下
<script>
function initialize(address) {
geocoder = new GClientGeocoder();
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(point, 16);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
var option = { latlng:point };
var scontainer = document.getElementById("street");
panorama = new GStreetviewPanorama(scontainer, option);
GEvent.addListener(map, "click", moveCenter);
geocoder = new GClientGeocoder();
}
}
);
}
}
function moveCenter(overlay, latlng){
var client = new GStreetviewClient();
client.getNearestPanoramaLatLng(latlng, getLatLng);
}
function getLatLng(newlatlng){
map.panTo(newlatlng);
panorama.setLocationAndPOV(newlatlng);
}
</script>
相關文章:
可以寄送map.php原始檔案到我信箱？
還有～如果在本身網頁中～加入一個變數DataAddress變數為實際地址～如何改比較好？
謝謝
@taiwancmh
您好…己寄到你的信箱囉…
另外我的範例程式本來就有設變數為實際地址..你先參考看看吧..