Yahoo! Maps AJAX API 範例
新出爐的台灣版 Yahoo! Maps AJAX API (Yahoo! 奇摩地圖 API)，試試看吧：[jsg.example]
<label for="map_address">輸入地址或關鍵字：</label><input id="map_address" type="text" value="台北車站" /> <input type="button" id="gomap" value="go" style="background-color: lightyellow" /><br />
或試試這些景點：<a href="javascript:void(0)" class="map_label">台北101</a>、<a href="javascript:void(0)" class="map_label">陽明山</a>、<a href="javascript:void(0)" class="map_label">小碧潭捷運站</a>、<a href="javascript:void(0)" class="map_label">光華商場</a>、<a href="javascript:void(0)" class="map_label">新竹縣新豐鄉上坑村坑子口102之1號</a>(小叮噹科學遊樂區)
<br /><br />
<div id="map_canvas" style="width: 100%; height: 500px; border: 5px silver solid"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tw.api.maps.yahoo.com/ajaxymap?v=3.8&appid=G047mzTV34GH5tb34fWgZ3zFS4wF8uSWea9PJC0EDpBA4.oIzBAO1CSyfA--"></script>
<script type="text/javascript">
var map = new YMap(document.getElementById('map_canvas'));
map.addTypeControl();
map.setMapType(YAHOO_MAP_REG);
map.addZoomLong();
$j = jQuery.noConflict();
$j(function() {
$j('#gomap').click(function() {
map.drawZoomAndCenter($j('#map_address').val(), 2);
}).trigger('click');
$j('.map_label').click(function() {
map.drawZoomAndCenter($j(this).html(), 2);
});
});
</script>
[/jsg.example]
Yahoo! Maps API 使用方式與其他地圖 API 相似，先到以下網址取得授權碼：
[url=http://developer.yahoo.com/wsregapp/]http://developer.yahoo.com/wsregapp/[/url]
其中 Authentication method 選擇「Generic」即可，表示不需要使用者認證，其他各項自行填寫。完成後會得到一組授權碼，用於 API 的參數之一。台灣 Yahoo! Maps API 的 JavaScript 位置如下：
[code js:nocontrols]
<script type="text/javascript" src="http://tw.api.maps.yahoo.com/ajaxymap?v=3.8&appid=你的授權碼"></script>
[/code]
以下的範例是本頁用到的幾個功能：
[code js:nocontrols]
<!-- 地圖用的 div -->
<div id="map"></div>
<!-- 引用地圖的 JavaScript API，記得使用你自己申請的授權碼 -->
<script type="text/javascript" src="http://tw.api.maps.yahoo.com/ajaxymap?v=3.8&appid=VtWGhknV34E4UMtrfTvfQy3SJyEcYBFpbDTtrwSblDlyqbYJA2BkhzpHBA--"></script>
<script type="text/javascript">
//初始化
var map = new YMap(document.getElementById('map'));
//設定地圖為一般街道圖，另外還有衛星圖 YAHOO_MAP_SAT 可用
map.setMapType(YAHOO_MAP_REG);
//加入地圖種類的切換鈕
map.addTypeControl();
//加入放大縮小的控制項
map.addZoomLong();
//將地圖中心定位到台北車站，地圖解析度為第二級
map.drawZoomAndCenter('台北車站', 2);
</script>
[/code]
有興趣的人可以前往以下網址得到更多資訊：
[list]
[*][url=http://tw.developer.yahoo.com/maps/]Yahoo! 地圖 API 介紹[/url][*][url=http://developer.yahoo.com/maps/ajax/index.html#ex1]範例[/url][*][url=http://developer.yahoo.com/maps/ajax/V3.8/reference.html]API 參考手冊[/url][/list] Yahoo Maps 出現了新玩法，請直接看看以下範例：
[jsg.example]
<h2>新店市好吃的餐廳</h2>
<ul id="foo">
<li>可愛村便當：台北縣新店市大豐街8號</li>
<li>阿輝現炒黃牛肉：台北縣新店市中興路三段225號</li>
<li>黑人牛肉麵：台北縣新店市中興路三段176號</li>
<li>蘇杭：台北縣新店市民權路25號2F</li>
<li>王家包子：台北縣新店市國校路25號之1</li>
<li>辣。四川成都小炒：台北縣新店市吉安路2-1號</li>
<li>山東餃子館：台北縣新店市中央路133巷19號1樓</li>
<li>樂陶然健康小火鍋：台北縣新店市中央五街2號</li>
<li>六六火鍋：台北縣新店市中央路89號</li>
<li>龍門客棧：台北縣新店市中央路98號之1</li>
<li>麵對麵：台北縣新店市中央路33號</li>
</ul>
<script type="text/javascript" src="_lib/others/smart_address/smart_address_ajax.js"></script>
[/jsg.example]
使用方式請下載 [url=http://tw.developer.yahoo.com/asset/smartmap/smart_address_ajax.js]smart_address_ajax.js[/url]
smart address 可批次處理多個地址並且以地圖的方式顯示，但這些地址必須被包含在某個 DOM Element 裡面，如：
[code html]
<ul id="foo">
<li>可愛村便當：台北縣新店市大豐街8號</li>
<li>阿輝現炒黃牛肉：台北縣新店市中興路三段225號</li>
<li>黑人牛肉麵：台北縣新店市中興路三段176號</li>
<li>蘇杭：台北縣新店市民權路25號2F</li>
<li>王家包子：台北縣新店市國校路25號之1</li>
<li>辣。四川成都小炒：台北縣新店市吉安路2-1號</li>
<li>山東餃子館：台北縣新店市中央路133巷19號1樓</li>
<li>樂陶然健康小火鍋：台北縣新店市中央五街2號</li>
<li>六六火鍋：台北縣新店市中央路89號</li>
<li>龍門客棧：台北縣新店市中央路98號之1</li>
<li>麵對麵：台北縣新店市中央路33號</li>
</ul>
[/code]
所有要以地圖顯示的地址都被包在 [font=Courier New]id="foo"[/font] 的元素內，因此我們可以用 smart address 一次處理 [font=Courier New]id="foo"[/font] 元素內的所有地址。再打開你下載的 smart_address_ajax.js，找到倒數第 5 行：
[code js]
var YA = document.getElementById('foo');
[/code]
修改 [font=Courier New]document.getElementById('[color=Blue]foo[/color]')[/font] 為你的網頁內的元素 id 名稱，記得將 Yahoo Maps API 也先 load 進來，這樣就可以有很酷的地圖功能了。
此外還有點選地址直接連結到雅虎奇摩地圖網站的方式，詳情請見[url=http://www.wretch.cc/blog/taiwanydn/11728731]SmartMap：地圖應用小工具[/url] 這裡真是好地方:lol
試了一下yahoo!map很好玩:lol 感恩 哦，這個API讓我好睡!!!!!yahoo!!!!
頁:
[1]