essoduke/jquery-tinymap

一種丟棄 Google Maps API 手冊的概念！輕鬆在網頁建立 Google 地圖的 jQuery Plugin

jquery-tinymap's Issues

doc 的 polygon 跟 polyline 漏寫 id

如題，我看文件的時候想說奇怪怎麼 marker 有 id 可是其他沒有還以為只有 marker 可以用 id XD

另外問一下，clear 使用 id 的時候可以只比對 prefix 嗎？
因為我在底下有看到一個 get 裡面抓 id 有寫一個 以自訂 ID 方式（此方式將比對符合輸入字串起始的 ID）

另外要是 marker、polygon、polyline 這些也可以一組一組丟進去就好了...
還有 markerCluster 可以針對每組使用

例如

$(selector).tinyMap({
    ...
    marker: [{
        id: 'id',
        markers: [{...}, {...}],
        markerCluster: true|false,
        func: ...
    }],
    polygon: [{
        id: 'id',
        polygons:: [{...}, {...}],
        func: ...
    }]
})

另外有些範例你昨天更新之後無法顯示變成有錯誤
jquery.tinyMap-3.3.16.min.js?ver=3.3.16.0:5 Uncaught TypeError: Cannot read property 'png' of undefined

地圖標記功能無法作用

google.maps.Marker 方法其 icon 項不能接受空對象, 會導致默認圖示被覆蓋.

關於自我定位和搜尋最近的分店問題

您好，小弟是剛入行的新手正在幫公司做分店資訊的網頁會需要用到搜尋最近分店的按鈕，這兩個禮拜已經爬過您的文章，也做得差不多了，目前有成功定位自己的位置，還有用你的計算式算出最近的分店位置並將中心定位過去，但是順序出了點問題，我點下搜尋按鈕後，map都會先定位到我預設的假位置，然後才會算好GPS定好的位置，我得再按一次他才會定位到我要的最近分店，已經換過code的順序了，不是沒效果就是壞掉，想請問有沒有辦法可以讓他先搜尋跟算好我的定位後再去定位最近分店呢？

以下是我的code：

`var map = $('#map');

var current = ['23.4678812', '120.43860749999999']; // 假位置

var loc = [{
addr: ['25.0071463', '121.51574540000001'],
text: '福和店
新北市永和區福和路327號
02-29268708
09:30AM10:00PM',
label: '福和店',
css: 'labels',
// 動畫效果
animation: 'DROP|BOUNCE'
}, {
addr: ['22.9777598', '120.22095480000007'],
text: '崇學店
台南市東區崇學路18號
06-2672988
09:30AM10:00PM',
label: '崇學店',
css: 'labels',
// 自訂圖示
// 動畫效果
animation: 'DROP|BOUNCE'
}, {
addr: ['23.564602', '120.30418699999996'],
text: '北港店
雲林縣北港鎮中山路18號
05-7834488
09:00AM~06:30PM',
label: '北港店',
css: 'labels',
// 動畫效果
animation: 'DROP|BOUNCE'
}, {
addr: current,
text: '目前位置',
icon: '../Images/web/rabbit_head3.png',
css: 'label'
}, ];`

`$(function() {

$(".searchBtn").on("click", function getLocation() {  // 點選按鈕後 定位自己所在位置
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        alert("Geolocation is not supported by this browser.");
    }

});

function showPosition(position) {  // 將current的值改成定位後的座標
    var lat = position.coords.latitude,
        lon = position.coords.longitude;
    console.log(lat + ', ' + lon)
    current[0] = lat;
    current[1] = lon;
}

$(function getmap() {

    $('#map').tinyMap({
        center: '25.0071463,121.51574540000001',
        marker: loc,
        zoom: 17,
        event: {
            'idle': {
                'func': function() {

            // 點選按鈕後搜尋離current的座標最近的座標
                    $(".searchBtn").on("click", function neardyStore() { 
                        var i = 0,
                            icon = {},
                            pos = {},
                            distance = [],
                            nearest = false,

                            // 取得目前位置的 LatLng 物件
                            now = new google.maps.LatLng(current[0], current[1]),
                            // 取得 instance
                            m = $('#map').data('tinyMap'),
                            // 取得已建立的標記
                            markers = m._markers;

                        // 使用迴圈比對標記（忽略最末個）
                        for (i; i < loc.length - 1; i += 1) {
                            // 建立標記的 LatLng 物件
                            pos = new google.maps.LatLng(loc[i].addr[0], loc[i].addr[1]);
                            /**
                             * 利用幾何圖形庫比對標記與目前位置的測地線直線距離並存入陣列。
                             * http://goo.gl/ncP2Gz
                             */
                            distance.push(google.maps.geometry.spherical.computeDistanceBetween(pos, now));
                        }
                        console.dir(distance);

                        // 尋找陣列中最小值的索引值
                        nearest = distance.indexOf(Math.min.apply(Math, distance));
                        if (false !== nearest) {
                            if (undefined !== markers[nearest].infoWindow) {

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

                                // 更換此標記的圖示
                                markers[nearest].setIcon('http://app.essoduke.org/tinyMap/6.png');
                                markers[nearest].infoWindow.content += '<p>距離: ' + distance[nearest].toString() + ' 公尺</p>';

                                // 移動此標記至地圖中心
                                m.map.panTo(markers[nearest].position);

                            }
                        }
                    })
                },
                'once': true
            }
        }

    });
});

});`

TypeError: a.container.innerHTML is not a function

TypeError: a.container.innerHTML is not a function

[min]
a.container.innerHTML(g("<div/>").text(e).html())

[unmin]
self.container.innerHTML($('<div/>').text(msg).html());

innerHTML is HTML DOM property NOT function

Async API loading timing issue

Hi,

When I first time called $(selector).tinyMap({...}) and it started to download google map api asynchronously. If I called $(selector).tinyMap('modify', {...}) immediately after first called, the 'modify' may be lost without any information.

The test fiddle is https://jsfiddle.net/0nmy3x17/2/

If the 'modify' called before 'gMapsCallback', it will lost and the modification won't be applied.

$(window).on('gMapsCallback', function () {
        self.init();
});

Do you have any idea to handle these scenario? Currently I will just load data before I initialize the tinyMap. Thank you!

clear with array not working

$map.tinyMap('clear', ['polyline']);

不會清除，改成

$map.tinyMap('clear', 'polyline');

之後就可以了

There is no git tags on GitHub repository

Hi @essoduke ,
We are cdnjs team, we'd like to host this library.
The git auto-updater in cdnjs relies on git tags so that it can recognize the correct version and automatically update the repo.
Could you please add git tags for the repo?

If you have any suggestions, please let me know.
Thank you.

---

Hi @essoduke 大大您好，
我是 CDNJS 的成員之一，我們想要收錄這個 library 到 CDNJS 中。
CDNJS 是一個前端的資源庫，我們目前已經收錄了 3241 個 library ，這數字還會再持續成長中。

在這邊想請問您是否能為這個 repository 添加 git tag 呢？
因為當新的版本釋出的時候，我們的 CDNJS bot 會根據 git tag 來自動添加版本。
在維護上也更加的方便，並且也可以讓更多人透過 CDN 的服務更快速的存取您的 library。

若以上有不妥之處，還請您見諒。
期待您的回覆。
謝謝！

cdnjs/cdnjs#9270

Marker with label set content

您好，請問 markerWithLabel 要如何設定顯示的文字呢？原本我用 google map api 的寫法如下：

var marker = new MarkerWithLabel({
        position: position,
        map: this.map,
        labelContent: "0",
        labelAnchor: new google.maps.Point(20, 38),
        labelClass: "map-labels",
        labelInBackground: false,
        labelStyle: {opacity: 1.0},
        icon: this.createSymbol("#dd4b39")
});

用 labelContent: "0" 可以設定 marker 內的文字，結果如下圖：

現在想要改用 tinyMap 來做 markerWithLabel，原始檔的路徑已失效所以我沒放 fiddle，

$.fn.tinyMapConfigure({
        'api': '//maps.google.com/maps/api/js',
        'v': 3,
        'key': 'API_KEY',
        'language': 'zh-TW',
        'withLabel': 'URL_PATH/markerwithlabel.js'
});

var marker = [{
        id: "0",
        addr: position,
        text: "show some text",
        icon: this.createSymbol("#dd4b39"),
        newLabel: "0",
        labelContent: "0",
        labelAnchor: new google.maps.Point(20, 38),
        labelClass: "map-labels",
        labelInBackground: false,
        labelStyle: {opacity: 1.0}
}];

顯示結果如下圖：

不知道是否有什麼地方我弄錯了嗎？是想要在 marker 裡面顯示 "0" 而不是用 newLabel: "0" 顯示在下面，謝謝！

Baidu Maps support

Great plugin - Thanks very much!

I'm trying to get the Baidu API working: "http://api.map.baidu.com/api?v=1.2"

Since I can't speak Chinese, does anyone have any tips on configuring:

$.fn.tinyMapConfigure({ 'api': '//api.map.baidu.com/api?v=1.2', 'language': 'zh-TW', 'libraries': ????, 'clusterer': ????? });

As a feature request, would it be possible to set/switch the API depending on user's location (in China use BM since GM is blocked)?

新增特定圖層

您好，我想要在地圖加上 Traffic Layer
想請問該怎麼做？

我試著這樣做卻發現沒有顯示

var gmap = $('#gmap');
gmap.tinyMap({
    center: '台灣新竹市東區新安路2號',
    zoom: 14
})

var instance = gmap.data('tinyMap');
var map = instance.map

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

bower.json syntax error

There is an extra comma in the last element of "keywords".
Please fix it, thanks

對 disableDoubleClickZoom 參數的支援

許多情況下, 經常需要禁用雙擊縮放.
在現有基礎下新增并不麻煩, 希望下個版本得到支援.

map.tinyMap is not a function

你好，上次因為你的協助完成了一個定位和搜尋功能的小地圖網頁，但剛剛把它放上公司內部的測試用伺服器的時候，他只有一開始的成功定位我現在的位置並且panTo了過來，但之後點擊搜尋最近分店的紐時，它都不會動，並顯示了“map.tinyMap is not a function”（我使用的是firefox做測試，因為不明原因我的chrome不給我定位），之前做的分店選單自己手動選擇panTo目標也沒有作用，想請問大師知不知道是什麼問題呢？
他說不是function的碼：

$(".searchBtn").on("click", function neardyStore() {
var i = 0,
    icon = {},
    pos = {},
    distance = [],
    nearest = false,
    // 取得目前位置的 LatLng 物件
    coords = '',
    now = {},
    // 取得 instance
    // 取得已建立的標記
    markers = map.tinyMap('get', 'marker'),        //**是這一句被說not a function**
    // 取得地圖 instance
    m = map.tinyMap('get', 'map');

// 從元素取得目前位置
coords = ($('#pos').text()).split(',');
// 轉成 google maps position object
now = new google.maps.LatLng(coords[0], coords[1]);

// 使用迴圈比對標記
for (i; i < loc.length - 1; i += 1) {
    // 建立標記的 LatLng 物件
    pos = new google.maps.LatLng(loc[i].addr[0], loc[i].addr[1]);
    /**
     * 利用幾何圖形庫比對標記與目前位置的測地線直線距離並存入陣列。
     * http://goo.gl/ncP2Gz
     */
    distance.push(google.maps.geometry.spherical.computeDistanceBetween(pos, now));
}
// 尋找陣列中最小值的索引值
nearest = distance.indexOf(Math.min.apply(Math, distance));
if (false !== nearest) {
    if ('undefined' !== typeof markers[nearest].infoWindow) {
        // 開啟此標記的 infoWindow
        markers[nearest].infoWindow.open(m, markers[nearest]);
        // 更換此標記的圖示
        markers[nearest].setIcon('../Images/web/rabbit_head2.png');
        markers[nearest].infoWindow.content += '<p>距離: ' + distance[nearest].toString() + ' 公尺</p>';
        // 移動此標記至地圖中心
        m.panTo(markers[nearest].position);
    }
}
     // alert(markers[nearest].position)
change(String(markers[nearest].position));
})

原生參數問題

mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    position: google.maps.ControlPosition.TOP_RIGHT,
}

然後一片白之後 console 表示

google is not defined

請問這該怎解？

關於導航問題

您好，想請問一下，如果要做導航的話之前有爬文到from: '', to: '', travel: ''這些用法，可是像我的碼已經寫成這樣了，我該怎麼把它們加進去才可以點擊搜尋分店按鈕後用自己的所在位置直接導航去最近的分店呢？

                   $('#map').tinyMap({
                       center: centerstr,
                       marker: makers,
                       zoom: 17,
                       autoLocation: function(pos) {
                           // 將目前位置記錄在元素內，供之後讀取（pos 會根據裝置位置自動更新）
                           var centerstr = [pos.coords.latitude, pos.coords.longitude].join(',');
                           $('#pos').text(centerstr);
                       }
                   });

                   // 搜尋分店按鈕事件
                   $(".searchBtn").on("click", function neardyStore() {
                       var i = 0,
                           icon = {},
                           pos = {},
                           distance = [],
                           nearest = false,
                           // 取得目前位置的 LatLng 物件
                           coords = '',
                           now = {},
                           // 取得 instance
                           // 取得已建立的標記
                           markers = map.tinyMap('get', 'marker'),
                           // 取得地圖 instance
                           m = map.tinyMap('get', 'map');

                       // 從元素取得目前位置
                       coords = ($('#pos').text()).split(',');
                       // 轉成 google maps position object
                       now = new google.maps.LatLng(coords[0], coords[1]);

                       // 使用迴圈比對標記
                       for (i; i < loc.length - 1; i += 1) {
                           // 建立標記的 LatLng 物件
                           pos = new google.maps.LatLng(loc[i].addr[0], loc[i].addr[1]);
                           /**
                            * 利用幾何圖形庫比對標記與目前位置的測地線直線距離並存入陣列。
                            * http://goo.gl/ncP2Gz
                            */
                           distance.push(google.maps.geometry.spherical.computeDistanceBetween(pos, now));
                       }

                       // 尋找陣列中最小值的索引值
                       nearest = distance.indexOf(Math.min.apply(Math, distance));
                       if (false !== nearest) {
                           if ('undefined' !== typeof markers[nearest].infoWindow) {
                               // 開啟此標記的 infoWindow
                               markers[nearest].infoWindow.open(m, markers[nearest]);
                               // 更換此標記的圖示
                               markers[nearest].setIcon('../Images/web/rabbit_head2.png');
                               markers[nearest].infoWindow.content += '<p>距離: ' + distance[nearest].toString() + ' 公尺</p>';
                               // 移動此標記至地圖中心
                               m.panTo(markers[nearest].position);
                           }
                       }
                   })

disableDefaultUI 無法作用

disableDefaultUI 被其他屬性覆蓋, 導致其失效. 可以把考慮衝突的一部分代碼去掉.
例如 zoomControl / panControl 默認它們是開啓的[1], 并不需要重新賦值.
1 : https://developers.google.com/maps/documentation/javascript/controls?hl=zh-tw#DefaultUI