建立標記

.labels {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px
}
$('#map-marker-01').tinyMap({
    'center': ['25.039065815333753', '121.56097412109375'],
    'zoom': 14,
    'marker': [
        {
            'addr': ['25.039065815333753', '121.56097412109375'],
            'text': '<strong>110台灣台北市信義區逸仙路288號</strong>',
            'newLabel': '文字標籤',
            'newLabelCSS': 'labels',
            // 自訂外部圖示
            'icon': {
                'url': '/images/big.png',
                'scaledSize': [48, 48]
            },
            // 動畫效果
            'animation': 'DROP'
        },
        {'addr': ['25.041282077030896', '121.56741142272949']},
        {'addr': ['25.0383270525352', '121.57045841217041'], 'text': '<strong>110台灣台北市信義區松高路68號</strong>'},
        {'addr': ['25.034516521123315','121.56496524810791'], 'text': '<strong>110台灣台北市信義區台北101</strong>'},
        {'addr': ['25.037627167884715', '121.56732559204102'], 'text': '<strong>110台灣台北市信義區松壽路20巷</strong>'},
        {'addr': ['25.039726809855434', '121.55633926391602'], 'text': '<strong>106台灣台北市大安區光復南路280巷25號</strong>'},
        {'addr': ['25.037160575899154', '121.55350685119629'], 'text': '<strong>106台灣台北市大安區仁愛路四段300巷11號</strong>'},
        {'addr': ['25.035877438787317', '121.55715465545654'], 'text': '<strong>106台灣台北市大安區光復南路440-1號</strong>'},
        {'addr': ['25.033972149830436', '121.56063079833984'], 'text': '<strong>110台灣台北市信義區莊敬路</strong>'},
        {'addr': ['25.031794640503858', '121.56414985656738'], 'text': '<strong>110台灣台北市信義區松勤街80號</strong>'},
        {'addr': ['25.035255306871402', '121.56998634338379'], 'text': '<strong>110台灣台北市信義區松勇路47號</strong>'},
        {'addr': ['25.033855498524844', '121.5686559677124'], 'text': '<strong>110台灣台北市信義區松仁路130號</strong>'},
        {'addr': ['25.036927279240775', '121.57376289367676'], 'text': '<strong>110台灣台北市信義區松德路168巷12弄9號</strong>'},
        {'addr': ['25.041593128099265', '121.5723466873169'], 'text': '<strong>110台灣台北市信義區忠孝東路五段295巷5號</strong>'},
        {'addr': ['25.04485911668452', '121.56917095184326'], 'text': '<strong>110台灣台北市信義區松隆路61號</strong>'},
        {'addr': ['25.04536455952624', '121.56402111053467'], 'text': '<strong>110台灣台北市信義區市民大道</strong>'},
        {'addr': ['25.04380934412532', '121.55998706817627'], 'text': '<strong>110台灣台北市信義區光復南路133號</strong>'},
        {'addr': ['25.041904178378704', '121.55848503112793'], 'text': '<strong>110台灣台北市信義區光復南路169巷14號</strong>'},
        {'addr': ['25.038521464229383', '121.55900001525879'], 'text': '<strong>110台灣台北市信義區仁愛路四段450號</strong>'}
    ]
});

綁定事件

$('#map-marker-02').tinyMap({
    'center': ['25.034516521123315','121.56496524810791'],
    'zoom'  : 14,
    'marker': [
        {
            'addr': ['25.034516521123315','121.56496524810791'],
            'event': {
                // created 事件於標記建立成功時執行。
                'created': function () {
                    console.info('Event binding:')
                    console.info('Marker create finished:');
                    console.log(this);
                },
                // Click 事件
                'click' : function (e) {
                    alert('緯度: ' + e.latLng.lat() + ', 經度: ' + e.latLng.lng());
                },
                // Mouseover 事件
                'mouseover': {
                    'func': function (e) {
                        alert('我只能執行一次');
                    },
                    'once': true // 僅執行一次
                }
            }
        }
    ]
});

使用目前位置建立標記

裝置須搭載並開啟 GPS 或 WIFI 連線。

var map = $('#map-marker-geolocation');
map.tinyMap({
    'center': ['25.034516521123315','121.56496524810791'],
    'zoom'  : 14,
    'autoLocation': function (loc) {
        map.tinyMap('modify', {
            'marker': [{
                'addr': [
                    loc.coords.latitude,
                    loc.coords.longitude
                ]
            }]
        });
    }
});

設置標記叢集

$('#map-marker-03').tinyMap({
    'center': ['25.039065815333753', '121.56097412109375'],
    'zoom': 14,
    'markerCluster': true,
    'marker': [
        {
            'addr': ['25.039065815333753', '121.56097412109375'],
            'text': '<strong>110台灣台北市信義區逸仙路28號</strong>',
            'newLabel': '標記文字層',
            'newLabelCSS': 'labels',
            'event': {
                'click' : function (e) {
                    alert('緯度: ' + e.latLng.lat() + ', 經度: ' + e.latLng.lng());
                },
                'mouseover': {
                    'func': function (e) {
                        alert('我只能執行一次');
                    },
                    'once': true
                }
            },
            // 自訂圖示
            'icon': {
                'url': '/images/big.png',
                'scaledSize': [64, 64]
            },
            // 動畫效果
            'animation': 'DROP'
        },
        {'addr': ['25.04151536540612', '121.56354904174805'], 'text': '<strong>110台灣台北市信義區忠孝東路四段559巷8號</strong>'},
        {'addr': ['25.041282077030896', '121.56741142272949'], 'text': '<strong>110台灣台北市信義區忠孝東路五段132號</strong>'},
        {'addr': ['25.0383270525352', '121.57045841217041'], 'text': '<strong>110台灣台北市信義區松高路68號</strong>'},
        {'addr': ['25.034516521123315','121.56496524810791'], 'text': '<strong>110台灣台北市信義區台北101</strong>'},
        {'addr': ['25.037627167884715', '121.56732559204102'], 'text': '<strong>110台灣台北市信義區松壽路20巷</strong>'},
        {'addr': ['25.039726809855434', '121.55633926391602'], 'text': '<strong>106台灣台北市大安區光復南路280巷25號</strong>'},
        {'addr': ['25.037160575899154', '121.55350685119629'], 'text': '<strong>106台灣台北市大安區仁愛路四段300巷11號</strong>'},
        {'addr': ['25.035877438787317', '121.55715465545654'], 'text': '<strong>106台灣台北市大安區光復南路440-1號</strong>'},
        {'addr': ['25.033972149830436', '121.56063079833984'], 'text': '<strong>110台灣台北市信義區莊敬路</strong>'},
        {'addr': ['25.031794640503858', '121.56414985656738'], 'text': '<strong>110台灣台北市信義區松勤街80號</strong>'},
        {'addr': ['25.035255306871402', '121.56998634338379'], 'text': '<strong>110台灣台北市信義區松勇路47號</strong>'},
        {'addr': ['25.033855498524844', '121.5686559677124'], 'text': '<strong>110台灣台北市信義區松仁路130號</strong>'},
        {'addr': ['25.036927279240775', '121.57376289367676'], 'text': '<strong>110台灣台北市信義區松德路168巷12弄9號</strong>'},
        {'addr': ['25.041593128099265', '121.5723466873169'], 'text': '<strong>110台灣台北市信義區忠孝東路五段295巷5號</strong>'},
        {'addr': ['25.04485911668452', '121.56917095184326'], 'text': '<strong>110台灣台北市信義區松隆路61號</strong>'},
        {'addr': ['25.04536455952624', '121.56402111053467'], 'text': '<strong>110台灣台北市信義區市民大道</strong>'},
        {'addr': ['25.04380934412532', '121.55998706817627'], 'text': '<strong>110台灣台北市信義區光復南路133號</strong>'},
        {'addr': ['25.041904178378704', '121.55848503112793'], 'text': '<strong>110台灣台北市信義區光復南路169巷14號</strong>'},
        {'addr': ['25.038521464229383', '121.55900001525879'], 'text': '<strong>110台灣台北市信義區仁愛路四段450號</strong>'}
    ]
});

點擊地圖建立可移動的標記

var map = $('#map-marker-04');
map.tinyMap({
    'center': ['25.039065815333753', '121.56097412109375'],
    'zoom': 14,
    'event': {
        'click': function (e) {
            map.tinyMap('modify', {
                'marker': [
                    {
                        'addr': [e.latLng.lat(), e.latLng.lng()],
                        'draggable': true,
                        'event': {
                            'dragend': function () {
                                alert(this.position.lat() + ', ' + this.position.lng());
                            }
                        }
                    }
                ]
            });
        }
    }
});

使用 Canvas 繪製標記圖示

//利用 canvas 產生內含文字的圖檔
function createMarkerIcon (text, opt) {
    // 定義預設參數
    var defaultOptions = {
        'fontStyle': 'normal', // normal, bold, italic
        'fontName': 'Arial',
        'fontSize': 12, //以 pixel 為單位
        'bgColor': 'darkblue',
        'fgColor': 'white',
        'padding': 4,
        'arrowHeight': 5 //下方尖角高度
    };
    options = $.extend(defaultOptions, opt);

    // 建立 Canvas
    var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d');
    // 組合文字屬性 css string
    var font = options.fontStyle + ' ' + options.fontSize + 'px ' +
               options.fontName;
    context.font = font;
    var metrics = context.measureText(text);
    //文字大小加上 padding 作為外部尺寸
    var w = metrics.width + options.padding * 2;
    //高度以 font 的大小為準
    var h = options.fontSize + options.padding * 2 +
            options.arrowHeight;

    canvas.width = w;
    canvas.height = h;
    // 邊框及背景
    context.beginPath();
    context.rect(0, 0, w, h - options.arrowHeight);
    context.fillStyle = options.bgColor;
    context.fill();
    // 畫出下方尖角
    context.beginPath();
    var x = w / 2, y = h, arwSz = options.arrowHeight;
    context.moveTo(x, y);
    context.lineTo(x - arwSz, y - arwSz);
    context.lineTo(x + arwSz, y - arwSz);
    context.lineTo(x, y);
    context.fill();
    // 印出文字
    context.textAlign = 'center';
    context.fillStyle = options.fgColor;
    context.font = font;
    context.fillText(text, (w / 2), (h - options.arrowHeight) / 2 + options.padding);
    // 傳回 DataURI 字串
    return canvas.toDataURL();
}

$('#map-marker-05').tinyMap({
    'center': ['25.039065815333753', '121.56097412109375'],
    'zoom': 14,
    'marker': [
        {
            'addr': ['25.039065815333753', '121.56097412109375'],
            'icon': createMarkerIcon('Hello World!')
        }
    ]
});

尋找距離最近的標記

var map = $('#map-marker-06');

var current = ['25.04151536540612', '121.56354904174805'];

var loc = [
    {'addr': ['25.034516521123315','121.56496524810791'], 'text': '<strong>110台灣台北市信義區台北101</strong>'},
    {'addr': ['25.037627167884715', '121.56732559204102'], 'text': '<strong>110台灣台北市信義區松壽路20巷</strong>'},
    {'addr': ['25.039726809855434', '121.55633926391602'], 'text': '<strong>106台灣台北市大安區光復南路280巷25號</strong>'},
    {'addr': ['25.037160575899154', '121.55350685119629'], 'text': '<strong>106台灣台北市大安區仁愛路四段300巷11號</strong>'},
    {'addr': ['25.035877438787317', '121.55715465545654'], 'text': '<strong>106台灣台北市大安區光復南路440-1號</strong>'},
    {'addr': ['25.033972149830436', '121.56063079833984'], 'text': '<strong>110台灣台北市信義區莊敬路</strong>'},
    {'addr': ['25.031794640503858', '121.56414985656738'], 'text': '<strong>110台灣台北市信義區松勤街80號</strong>'},
    {'addr': ['25.035255306871402', '121.56998634338379'], 'text': '<strong>110台灣台北市信義區松勇路47號</strong>'},
    {'addr': ['25.033855498524844', '121.5686559677124'], 'text': '<strong>110台灣台北市信義區松仁路130號</strong>'},
    // 找出離此標記最近的地點
    {'addr': current, 'text': '<strong>目前位置</strong>', 'icon': 'https://code.essoduke.org/images/4.png', 'newLabel': '目前位置', 'newLabelCSS': 'labels', 'ignore': true}
];

map.tinyMap({
    'center': ['25.037627167884715', '121.56732559204102'],
    'zoom': 14,
    'marker': loc,
    'event': {
        'idle': {
            'func': function () {
                var self = this;
                window.setTimeout(function () {
                    var distance = [],
                        nearest = false,
                        // 取得目前地圖中心
                        now = new google.maps.LatLng(current[0], current[1]);

                    map.tinyMap('get', 'marker', function (markers) {

                        markers.forEach(function (marker) {
                            var meters = 0;
                            // 忽略標有 ignore: true 屬性的標記
                            if (!marker.hasOwnProperty('ignore')) {
                                meters = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), now);
                                distance.push(meters);
                                marker.infoWindow.setContent(
                                    marker.infoWindow.getContent() + '<div>距離: ' + meters + ' 公尺</div>'
                                );
                            }
                        });
                        nearest = distance.indexOf(Math.min.apply(Math, distance));

                        if (false !== nearest && -1 !== nearest) {
                            if ('undefined' !== typeof markers[nearest].infoWindow) {

                                // 開啟此標記的 infoWindow
                                markers[nearest].infoWindow.open(self, markers[nearest]);

                                // 更換此標記的圖示
                                markers[nearest].setIcon(createMarkerIcon('我距離最近', {
                                    'bgColor': 'rgba(255, 0, 0, 0.9)'
                                }));

                                // 移動此標記至地圖中心
                                self.panTo(markers[nearest].position);
                            }
                        }
                    });
                }, 1000);
            },
            'once': true // 僅執行一次
        }
    }
});

使用 MarkerWithLabel

.box {
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 1px 1px 3px #666;
}
var map = $('#map-marker-07');
map.tinyMap({
    'center': ['25.034516521123315','121.56496524810791'],
    'zoom': 14,
    // 啟用 MarkerWithLabel
    'markerWithLabel': true,
    'marker': [
        {
            'addr': ['25.034516521123315','121.56496524810791'],
            'labelContent': '<strong>Hello World</strong><div><img src="/images/_111.jpg" alt="" /></div>',
            'labelClass'  : 'box',
            'icon': {
                'path': 'M 0 0'
            }
        }
    ]
});

沙盒控制器

# Latitude Longitude Toggle
var map = $('#map-marker-sandbox'),
    table = $('#table-sandbox');

map.tinyMap({
    'center': ['25.039065815333753', '121.56097412109375'],
    'zoom': 14,
    'event': function (loc) {

        var label = ['A', new Date().getTime()];

        map.tinyMap('modify', {
            'marker': [{
                'id': label.join(''),
                'addr': loc.latLng,
                'newLabel': '…',
                'newLabelCSS': 'labels',
                'draggable': true,
                'event': {

                    // Drag
                    'drag': function () {
                        var marker = this,
                            row = table.find('tr[data-row=' + marker.id + ']');
                        row.find('td:eq(1)').text(marker.getPosition().lat());
                        row.find('td:eq(2)').text(marker.getPosition().lng());
                    },

                    // Dragend
                    'dragend': function () {
                        var marker = this;
                    },

                    // Created
                    'created': function () {
                        var marker = this,
                            html = [
                                '<tr data-row="', label.join(''), '">',
                                '<td>', (table.find('tbody tr').length + 1), '</td>',
                                '<td>', marker.getPosition().lat(), '</td>',
                                '<td>', marker.getPosition().lng(), '</td>',
                                '<td><button class="btn btn-default" data-sandbox-remove="', label.join(''), '">Hide</button></td>',
                                '</tr>'
                            ];
                        $(html.join('')).appendTo(table.find('tbody'));
                    }
                }
            }]
        });
    }
});

// Toggle Button
$(document)
    .on('click', '[data-sandbox-remove]', function () {
        var obj = $(this),
            id = obj.data('sandbox-remove');
        map.tinyMap('get', {'marker': [id], 'label': [id]}, function (ms) {
            var m = ms.marker, lb = ms.label, visible = true;
            if (m.length) {
                visible = m[0].getVisible();
                m[0].setVisible(!visible);
                lb[0].set('visible', !visible);
                obj.text(visible ? 'Show' : 'Hide');
            }
        });
    });

留言 Comments

comments powered by Disqus