Options

Google Maps API 原生參數

若需使用 Google Maps API 原生常數傳入 tinyMap Options,可以字串型態傳入。

You could use native constants of Google Maps API by string if needed.

// Google Maps API Constants
selector.tinyMap({
    'mapTypeControlOptions': {
        'style'    : 'google.maps.MapTypeControlStyle.DROPDOWN_MENU',
        'position' : 'google.maps.ControlPosition.TOP_LEFT',
    },
});

autoLocation

boolean Function

是否要自動偵測使用者位置。預設值false

Detect client's location. Default to false.

瀏覽器須支援 HTML5 以及使用 WIFI 網路或搭載 GPS 的裝置。
User's browser must support HTML5, and WiFi connection or GPS enabled.


// Boolean
autoLocation: true|false // 預設 false
// Function
autoLocation: function (loc) {
    console.dir(loc);
}

center

Array Object string requires

初始的地圖中心位置。

Default location of Map center.

// 支援下列格式
// Array
center: [12.345678, 123.456789]
// Object
center: {
    lat: 12.345678,
    lng: 123.456789
}
// string
center: '12.345678, 123.456789'
center: '1681 Broadway, New York, NY 10036'

circle

Array

在地圖上繪製圓形。由 key-value Object 組合而成的陣列。

Create circle layer on map. Built-in key-value pairs in array.

circle: [
    {
        // 自訂 ID
        // Custom Id
        id: 'string',
        // 標記的經緯座標 Array
        // Marker's location
        center: 'Array|Object|string',
        // 圓形半形(公尺)
        // Circle's radius
        radius: 100,
        // 線條寬度
        // Stroke width
        width: 2,
        // 線條 HEX 顏色值
        // Stroke color in HEX.
        color: '#FF0000',
        // 填充 HEX 顏色值
        // Fill up color in HEX.
        fillcolor: '#FF0000',
        // 定義 Click 事件
        // Click event
        event: function () {
            console.dir(this);
        },
        /* 或是定義多個事件
        // Multiple events
        event: {
            // 自訂 Click
            click: function () {
                console.dir(this);
            },
            // 自訂 mouseover
            mouseover: {
                func: function () {
                    console.dir(this);
                },
                // 是否只執行一次
                // Run once or not
                once: false
            }
        }*/
    }…
]

direction

Array

在地圖上建立路徑規劃。由 key-value Object 組合而成的陣列。

Create direction layer on map. Built-in key-value pairs in array.

direction: [
    {
        // 自訂 ID
        // Custom ID
        id: 'string',
        // 起點位置
        // Start location
        from: 'Array|Object|string',
        // 起點的替代顯示文字
        // Text label of the Start
        fromText: 'string',
        // 終點位置
        // End location
        to: 'Array|Object|string',
        // 終點的替代顯示文字
        // Text label of the End
        toText: 'string',
        // 路徑中繼點,會依照陣列順序加入
        // Waypoints
        waypoint: ['Broadway street 1', 'Broadway street 2'…]
        // 或使用 Object 定義更詳細的中繼點
        // Waypoints in key-value pairs for details
        waypoint: [
            {
                // 中繼點位置
                location: 'Array|Object|string'
                text: '此中繼點的替代顯示文字, Text label of this waypoint'
                icon: '自訂圖示網址。Custom Icon URL'
            }
        ]
        // 是否繪製附加路徑,需要設置 requestExtra.provideRouteAlternatives: false。
        renderAll: true|false,
        // DirectionService 原生參數
        requestExtra: {
            // 是否提供附加路徑
            'provideRouteAlternatives': true|false
        },
        // 是否最佳化路徑。
        optimize: true,
        // 使用的交通類型。可用 driving, walking, bicycling
        // Traffic type: driving, walking or bicycling
        travel: 'driving',
        // 顯示完整路徑資訊的容器
        // Display information container
        panel: 'string|Object',
        // 是否自動縮放地圖以顯示路徑。
        // Auto zoom for Map viewport
        autoViewport: true,
        // 自訂圖示。設置此參數後,預設圖示將會停用
        icon: {
            from: '起點圖示位址'
            to: '終點圖示位址'
            waypoint: '中繼點圖示位址,此參數會取代各 waypoint.icon
        }
        // 路徑顏色、透明度、寬度設置
        'polylineOptions': {
            'strokeColor'   : 'string' // HEX 顏色值
            'strokeOpacity' : number // 透明度 0.0 - 1.0,
            'strokeWeight'  : number // 像素
        }
        // 定義 directions_changed 事件
        event        : {
            'directions_changed': {
                'func': function () {…}
            }
        }
    }…
]

event

Object Function

綁定地圖事件。預設值null

Map events binding. Default to null

// 完整事件名稱請參閱
// For all events name visit:
// https://developers.google.com/maps/documentation/javascript/reference?hl=zh-tw#Map
// 若不指定事件,預設為 Click
// Default event is Click.
map.tinyMap({
    event: function (map) {
        console.log('點擊地圖');
        // 回傳 Map 物件
        console.log(map.getCenter().lat());
    }
});

// 綁定多個特定事件
// Multiple events binding
map.tinyMap({
    event: {
        'dragstart': function () {
            console.log('開始拖曳 Start Drag');
        },
        'dragend': function () {
            console.log('拖曳結束 End Drag');
        }
    }
});

// 綁定單次事件
// Single event binding
map.tinyMap({
    event: {
        'click': {
            func: function () {
                console.log('我只能執行一次 Run Once!');
            },
            once: true
        }
    }
});

infoWindowAutoClose

boolean

點選 marker 時是否自動關閉其他已開啟的 infoWindow。預設值true

Auto close all opened infoWindow when marker was clicked. Defaul to true.

interval

number

Google GeoCoder 重新查詢的間隔時間(毫秒)。預設值200

The interval of Google Geocoding API between retries (ms). Default to 200.

kml

string Array

讀取外部 KML 檔案並在地圖上繪製軌跡。

Load external KML file to display tracks on Map.

// 讀取單一檔案
kml: 'KML file URL'
// 使用 Array 讀取多個檔案
// Multiple files in array
kml: [
    'KML file URL',
    'KML file URL'
    …
]

loading

string

地圖容器載入之前顯示的訊息。預設值載入中…

Text message which display in the container before the Map has loaded.. Default to 載入中…

marker

Array

在地圖上建立標記。由下列 key-value Object 組合而成的陣列。

Create Marker layer on map. Built-in key-value pairs in array.

{
    // 標記 ID
    // Custom ID
    id: 'string',
    // 標記的位置
    // Marker location
    addr: 'Array|Object|string',
    // 標記抬頭文字(markerControl 使用此屬性建立清單)
    // Marker title (for `markerControl` to create list)
    title: 'string',
    // 點擊標記時顯示於資訊視窗的文字(支援 HTML)
    // Content of infoWindow
    text: 'string',
    // 標籤文字層,顯示於標記底下
    // Text label of the Marker which will display below.
    newLabel: 'string',
    // 標籤文字層套用的 CSS 樣式名稱
    // CSS class name of this text label.
    newLabelCSS: 'string',
    // 是否顯示 Label(預設 true)
    // Show label or not. (Default to `true`)
    showLabel: true|false,
    // 使用 modify 方法時,若標記 id 不存在,是否強制新增至地圖
    // Force create the marker if custom id was not found.
    forceInsert : true|false,
    // 標記圖示,可使用 string 指定圖示網址
    // Icon URL of Marker.
    icon: '圖示網址'
    // 或是 Object 定義更詳細的圖示
    icon        : {
        // 圖示網址
        url: 'Icon URL',
        // 縮放尺寸
        scaledSize: [0, 0]
    },
    // 是否將此標記加入叢集(markerCluster 必須不為 null 或 false)
    // Append this marker to cluster. `markerCluster` must not be `null` or `false`.
    cluster: true|false,
    // 設定 infoWindow

    infoWindowOptions: {
        disableAutoPan: true|false,
        maxWidth: number,
        pixelOffset: [X, Y],
        zIndex: number
    },
    // 自訂任意名稱屬性
    // You can create own properties. Just give it a name/value.
    yourproperty: Any,
    // 定義 Click 事件
    event       : function () {
        console.log(this);
    },
    /* 或是定義多個事件
    event       : {
        // 自訂 Click
        click: function () {
            console.log(this);
        },
        // 自訂 mouseover
        mouseover: {
            func: function () {
                console.dir(this);
            },
            once: false // 是否只執行一次
        }
    }*/
}…

markerControl

string Object

標記清單輸出。將地圖上的標記建立下拉式選取清單。

Display select list from markers of map.


// Selector string:
markerControl: '.marker-list'

// Object:
markerControl: {
    container: 'string|Object', // selector 或 DOM
    css: 'string', // 附加於清單的 CSS class
    infoWindow: true|false, // 是否開啟 infoWindow,預設 true
    panTo: true|false, // 是否移至地圖中心,預設 true
    onChange: function (marker) {  // onChange callback 事件,預設 null
        console.log(marker); // 選取的 Marker 物件
        console.log(this); // HTMLSelectElement
    }
}

markerCluster

Object

設置叢集(群組)屬性。預設值null

各屬性作用請參考原文件說明 MarkerClustererPlus

markerCluster: {
    gridSize: (number),
    maxZoom: (number),
    zoomOnClick: (boolean),
    averageCenter: (boolean),
    minimumClusterSize: (number),
    styles: (object) {
        url: (string)
        height: (number)
        width: (number)
        anchor: (Array)
        textColor: (string)
        textSize: (number)
        backgroundPosition: (string)
    }
}

markerFitBounds

Object boolean

是否讓地圖自動縮放以顯示標記。預設值false

markerWithLabel

boolean number

是否載入 MarkerWithLabel 函式庫。預設值false

若傳入整數則表示「載入 MarkerWithLabel 並限制顯示地圖中心方圓半徑 n 公尺內的 Label。

各屬性作用請參考原文件說明 MarkerWithLabel

範例: 使用 10,000 筆資料測試

// Including Geometry Library first
$.fn.tinyMapConfigure({
    'libraries': 'geometry'
});

$(selector).tinyMap({
    'marker': […],
    'markerWithLabel': true // 顯示所有 Label
    'markerWithLabel': 1000 // 只顯示方圓半徑 1,000 公尺內的 Label
});

notFound

string

地圖無法查詢到位置時顯示的錯誤訊息。預設值找不到查詢的地點

places

Object

地方資訊程式庫。

必須載入 Places Library。

// Including Place Library first
$.fn.tinyMapConfigure({
    'libraries': 'places'
});

// 完整屬性請參閱:
// https://developers.google.com/maps/documentation/javascript/reference?hl=zh-tw#PlaceSearchRequest
places: {
    // 搜尋地點(預設為目前地圖的中心位置)
    location: 'Object'
    // 資料半徑範圍(單位:公尺)
    radius: 'number',
    // 搜尋關鍵字(必要)
    keyword: 'string',
    // 讀取完成後的 Callback 事件
    callback: function () {
        console.log(this); // 回傳的 JSON
    }
}

polygon

Array

在地圖上繪製幾何圖形。由下列 key-value Object 組合而成的陣列。

polygon: [
    {
        // 自訂 ID
        id: 'string',
        // 標記的經緯座標 Array
        coords: [
            ['lat1', 'lng1'],
            ['lat2', 'lng2']
            …
        ],
        // 線條寬度
        width: 2,
        // 線條 HEX 顏色值
        color: '#FF0000',
        // 填充 HEX 顏色值
        fillcolor: '#CC0000',
        // 定義 Click 事件
        event: function () {
            console.dir(this);
        },
        /* 或是定義多個事件
        event: {
            // 自訂 Click
            click: function () {
                console.dir(this);
            },
            // 自訂 mouseover
            mouseover: {
                func: function () {
                    console.dir(this);
                },
                once: false // 是否只執行一次
            }
        }*/
    }…
]

polyline

Array

在地圖上繪製線條。由下列 key-value Object 組合而成的陣列。

polyline: [
    {
        // 自訂 ID
        id: 'string',
        // 標記的經緯座標 Array
        coords: [
            ['lat1', 'lng1'],
            ['lat2', 'lng2']
            …
        ],
        // 線條 HEX 顏色值
        color: '#FF0000',
        // 線條寬度
        width: 2,
        // 是否貼近道路繪製
        snap: false,
        // 定義 Click 事件
        event: function () {
            console.dir(this);
        },
        /* 或是定義多個事件
        event       : {
            // 自訂 Click
            click: function () {
                console.dir(this);
            },
            // 自訂 mouseover
            mouseover: {
                func: function () {
                    console.dir(this);
                },
                once: false // 是否只執行一次
            }
        }*/
    }…
]

streetView

Object

街景設置。

streetView: {
    // 是否立即顯示街景
    visible: false,
    // 顯示的街景位置
    position: 'Array|Object|string',
    // 角度設置
    pov: {
        heading : 0 // 相機面向方位
        pitch   : 0 // 相機抬頭角度
        zoom    : 1 // 縮放等級
    },
    // 綁定 position_changed, pov_changed 事件
    event: {
        'position_changed': function () {…},
        'pov_changed': {
            'func': function () {…},
            'once': false // 是否只執行一次
        }
    }
}

styles

Array string

自訂樣式標記地圖 。設置為greyscale可顯示灰階地圖。預設值null

// 使用內建的 greyscale 樣式
styles: 'greyscale'
// 或是自訂樣式
styles: [
    {
        "featureType": "all",
        "elementType": "labels"
        …
    }
]

zoom

number requires

預設的地圖縮放等級。預設值16

Back to top

Methods

clear

移除(指定的)圖層。

// 清除所有圖層
$(selector).tinyMap('clear');

// 移除指定的圖層
$(selector).tinyMap('clear', 'marker,polyline,circle…');

// 移除各圖層內指定的項目
$(selector).tinyMap('clear', {
    'marker': [0, 1,…], // 以順序
    'polyline': ['ID1', 'ID2',…] // 以 ID
});

// Callback
$(selector).tinyMap('clear', 'Layer1', function () {
    console.log('Clear finished');
});

destroy

從指定的元素移除 tinyMap。

$(selector).tinyMap('destroy');

get

取得地圖上的圖層。

// 取得所有圖層(返回物件)
var x = $(selector).tinyMap('get');

// 取得指定的圖層(返回陣列)
var markers = $(selector).tinyMap('get', 'marker,label…');

// 取得指定圖層的指定項目
var layers = $(selector).tinyMap('get', {
    'marker': [0, 1…] // 以順序方式,必須為 int 型別
    'direction': ['A', 'B'…] // 以自訂 ID 方式(此方式將比對符合輸入字串起始的 ID)
    'circle': [0, 'C'…] // 以混合方式
});

// 使用 Callback
$(selector).tinyMap('get', 'marker', function (markers) {
    console.dir(markers);
});

getKML

將圖層匯出為 KML。

// 取得 KML 內容
var kml = $(selector).tinyMap('getKML');

// 可用選項及預設值
$(selector).tinyMap('getKML', {
    marker    : true,  // 包含 marker
    polyline  : true,  // 包含 polyline
    direction : true,  // 包含 direction
    download  : false  // 是否直接下載
});

modify

變更地圖設定。可用選項: 請參閱 Options 章節

$(selector).tinyMap('modify', {
    zoom: 16,
    marker: [
        …
    ]
});

panTo

移動地圖中心點至輸入的位置。

// 支援下列格式
// Array(推薦)
$(selector).tinyMap('panTo', [12.345678, 123.456789]);

// Object(推薦)
$(selector).tinyMap('panTo', {
    lat: 12.345678,
    lng: 123.456789
});

// string
$(selector).tinyMap('panTo', '12.345678, 123.456789');
$(selector).tinyMap('panTo', '1681 Broadway, New York, NY 10036');

// Error handler
$(selector).tinyMap('panTo', '12.345678, 123.456789', function (status) {
    console.log(status);
});

query

查詢地址或經緯座標。

/** https://developers.google.com/maps/documentation/javascript/reference#GeocoderResult */
// 以地址查詢座標(返回 GeocoderResult)
$(selector).tinyMap('query', '臺北市信義區市府路1號', function (addr) {
    console.log(addr.geometry.location.lat()); // Latitude
    console.log(addr.geometry.location.lng()); // Longitude
});

// 以座標查詢地址(返回 GeocoderResult)
$(selector).tinyMap('query', ['25.034516521123315','121.56496524810791'], function (addr) {
    console.log(addr.formatted_address); //110台灣台北市信義區信義連通天橋(臺北101至Att4Fun)
});

// 座標參數支援多種格式:
$(selector).tinyMap('query', {lat: 25.034516521123315, lng: 121.56496524810791}, function);
$(selector).tinyMap('query', '25.034516521123315, 121.56496524810791', function);

Back to top

Instance

若需要更進階的地圖應用,可以取出 instance 進行操作。

// 先建立 tinyMap 地圖
$(selector).tinyMap({
    …
});

// 再取出 instance
var instance = $(selector).data('tinyMap');

// 或是利用 get 方法
var instance = $(selector).tinyMap('get', 'map');

取得 Map Class。

var m = m.map; // Native Map Class
// Native Map methods;
var center = m.map.getCenter();
// Layers
var markers = m._markers;
var directions = m._directions;

取得路徑規劃資訊。

// Instance
var m = map.data('tinyMap');
var info = m.getDirectionsInfo();
console.dir(info);
/*
回傳 JSON 物件:
[
    [
        {
            distance: {
                text: "6.4 公里",
                value: 6416
            },
            duration: {
                text: "14 分",
                value: 852
            },
            from: "100台灣台北市中正區台北火車站",
            to: "110台灣台北市信義區台北101大樓"
        }
    ]
]
*/

Back to top

留言 Comments

comments powered by Disqus