tinyMap – 自訂個人 Google Map 的 jQuery 擴充套件

Posted by essoduke - 2009 年 10 月 29 日 20:53:04 - 698 User Views

這個擴充套件可以輕鬆建立自訂的 Google Map，舉凡尺寸、地圖類型和縮放控制、縮放等級，更能加入設定好的標記地點並填上說明。

下載位址

安裝

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=<em>YOUR_API_KEY"></script>
<script type="text/javascript" src="jquery.tinymap-1.0.js"></script>

參數說明

width: 地圖寬度 (Number) /* 預設：640px */
height: 地圖高度 (Number) /* 預設：480px */
latlng: 地圖置中的座標或地址，若為座標請使用 [x, y]，地址則直接輸入。
control: 顯示地圖類型選單 (Boolean) /* 預設：true */
zoom: 顯示地圖縮放選單 (Boolean) /* 預設：true */
zoomLevel: 預設地圖縮放等級 (Number) /* 預設：13 */
mapType: 預設地圖類型 (String) /* 選項：default, hybrid（混合）, satellite（衛星）預設：default */
marker: 標記群組 (JSON)：
[{addr:'標記地址或座標', text:'標記說明', icon:[圖示寬度, 圖示高度, 圖示位址]}]

範例：顯示高雄市政府地圖

範例：以衛星地圖及自訂圖示標示多個地點

$(function(){
var set1 = {
width: 639,
height: 359,
latlng: [22.638610116646756, 120.30184864997864],
mapType: 'satellite',
zoomLevel: 12,
marker: [
{addr:'高雄市鼓山區萬壽路350號', text:'<strong>壽山動物園</strong><br />高雄市鼓山區萬壽路 350 號', icon:[24, 24, '2.png']},
{addr:'高雄市左營區翠華路1435號', text:'<strong>蓮池潭</strong><br />高雄市左營區翠華路 1435 號', icon:[24, 24, '3.png']},
{addr:'高雄市苓雅區自強三路5號', text:'<strong>東帝士 85 大樓</strong><br />高雄市苓雅區自強三路 5 號', icon:[24, 24, '4.png']},
{addr:'高雄市左營區高鐵路105號', text:'<strong>台灣高鐵左營站</strong><br />高雄市左營區高鐵路 105 號', icon:[24, 24, '5.png']},
{addr:'高雄市三民區建國二路318號', text:'<strong>台鐵高雄車站</strong><br />高雄市三民區建國二路 318 號<br /><a href="http://service.tra.gov.tw/Kaohsiung/StationTimeTable/index.aspx">台鐵高雄車站</a>', icon:[24, 24, '6.png']}
]
};
$('#map1').tinymap( set1 );
});

No Comments yet »