十八股女婿: intelXDK 使用tinyMap 取得 Google Map API

2017/1/20

intelXDK 使用tinyMap 取得 Google Map API

Author: Willie
----------

近來利用intel XDK 開發Cross Platform 的APP, 好處就不用多說了, 以下是我利用 tinyMap 的應用實例：

在Header中引入Google API及tinyMap, 其中在底下[You API Key], [Your Path]分別輸入API KEY及你的tinyMap的路徑。

        <!-- Google Map API-->
        <script src="http://maps.googleapis.com/maps/api/js?key=[Your API Key];sensor=TRUE" type="text/javascript"></script>
        <!-- TinyMap -->
        <script src="[Your Path]/jQuery-tinyMap-master/jquery.tinyMap.min.js" type="application/javascript"></script>

在js/index_user_scripts.js 裡面註冊你的按鈕的Event呼叫loadMap()這個function，以下述的註冊方式只要css屬性中有cust-loadmap就會執行loadMap。

function register_event_handlers()
 {
    $(document).on("click", ".cust-loadmap", function(evt)
    {
        loadMap();
    });
    
 }
 $(document).ready(register_event_handlers);
})();

在js/app.js裡面寫入這段loadMap的Code。


// Geolocation using TinyMap API
// $("#divMyMap")請使用自行命名的DIV物件
function loadMap(){
            $('#divMyMap').tinyMap('panto', '台南市新化區和平街53號');
            $('#divMyMap').tinyMap({
                zoom:14,
                center:'台南市新化區和平街53號',
                //以用戶目前位置為中心
                autoLocation:false,
                marker: [
                    {
                        addr: '台南市新化區和平街53號',
                        text: '武德殿 06-xxxxxxx',
                        label: '武德殿'
                      
                    },
                    {
                        addr: '台南縣新化鎮中正路127巷35號',
                        text: '瓜瓜園 06-xxxxxxx',
                        label: '瓜瓜園'
                       
                    } 
                ]
            });
}

如此, 即可在按下按鈕時就產生MAP, 但要在按鈕轉到你要的頁面，這樣還是不夠，請在你的ICON上面設定如下，加入指定的頁面，以我的實例為主是利轉到為#page_map，這個部份就請依你的狀況來作調整。