Angular Mapbox vs Angular Leaflet Mapbox vs Angular google地圖

我對使用哪一個感到困惑。我目前正在使用角度映射盒 - >http://inkblot.io/angular-mapbox，但文檔並沒有解釋我想要的某些功能，例如如何將API調用中的標記與線連接起來，以及如何在生成時將地圖置於標記中心。 Angular Mapbox使用$ scope來渲染數據非常好，但我正在考慮切換到別的東西以獲得其他特性。有沒有人知道一個簡單的解決方案，使用$ scope使用ngrepeat渲染數據，將這些標記與線連接起來，並在生成這些標記時使地圖居中？Angular Mapbox vs Angular Leaflet Mapbox vs Angular google地圖

來源

2015-09-02 Alex

爲什麼不寫你自己的簡單指令，它將地圖實例傳遞給你的控制器範圍，這樣你就可以充分利用mapbox js api？可用於Angular的指令，如鏈接的那個，angular-leaflet-directive和angular-google-maps，如此臃腫和複雜，以至於最終會以慢應用程序開始。如果你只會展示幾個標記和多段線，那純粹是過度殺傷，會讓你陷入瘋狂。另外事實是這些文件在大多數情況下記錄不完善，更新和大部分不完整（迄今爲止沒有完整的api報道），在我看來這是一個不好的選擇。（與所有尊重這些項目的開發商）

它可以是如此簡單，模板：

<mapbox callback="callback"></mapbox>

對於指令：

angular.module('app').directive('mapbox', [ 
    function() { 
    return { 
     restrict: 'EA', 
     replace: true, 
     scope: { 
     callback: "=" 
     }, 
     template: '<div></div>', 
     link: function (scope, element, attributes) { 
     L.mapbox.accessToken = 'YOUR PUBLIC MAPBOX KEY'; 
     var map = L.mapbox.map(element[0], 'YOUR MAP PROJECT ID'); 
     scope.callback(map); 
     } 
    }; 
    } 
]);

現在用它在你的控制器：

angular.module('app').controller('rootController', [ 
    '$scope', 
    function ($scope) { 
    $scope.callback = function (map) { 
     map.setView([51.433333, 5.483333], 12); 
    }; 
    } 
]);

指令初始化地圖，將地圖實例傳遞迴控制器範圍和你很好去做任何你喜歡的事情。我在Plunkr上有一個工作示例，但Mapbox使示例鍵和映射無效。我有一個完整的工作示例，但它不使用Mapbox，它使用Leaflet，但原理保持不變，您可以在此處測試：http://plnkr.co/edit/gax5NL7DX2PWmJXKP9YD?p=preview

找到mapbox示例，記住它沒有因爲令牌已經過期或已被刪除：http://plnkr.co/edit/OpVhUKLryW8rbEtJ8jgh?p=preview

來源

2015-09-03 08:09:46 iH8

iH8，感謝您的輸入。我決定使用Angularjs-Google-Maps（ngMap），因爲我發現它是最簡單的方法來創建具有許多功能的地圖。它也有很好的文檔。 – Alex

對不起，如果我錯過了明顯的東西，但L從哪裏來？我剛剛碰到這個，它似乎很簡單，但我得到'L沒有定義' –

啊，似乎ruby是不包括從我的涼亭組件的mapbox.js ...我仍然是diggin，但如果你有任何建議，這將是非常感謝！ –

Angular Mapbox vs Angular Leaflet Mapbox vs Angular google地圖

回答

相關問題