AngularJS中使用百度地圖

前言

AngularJS做爲一個成功的框架，營造出了完備的生態系統。尤爲Directive，對於組件化起了很是大的做用。不少時候，如我這般懶人，網上搜一搜，就找到一個合用的Directive，省了本身諸多麻煩。今天就簡單介紹一下個人一個懶人組件 － 百度地圖。

源碼地址：angular-baidu-map

效果圖是這樣的：

注：本章介紹的是AngularJS的百度地圖指令組件，若是須要angular2支持的，請看這裏angular2-baidu-map

安裝

最low式

直接下載使用，爲何這種方式low，由於三方庫不用個什麼包管理工具，還隨着本身的項目源碼提交，浪費空間就算了，也丟了版本追蹤的能力...吧啦吧啦吧啦

推薦式

npm install angular-baidu-map --save

有人問爲何不提供bower支持，那我建議你真該多逛逛社區了，bower已經是明日黃花，諸多缺陷已經跟不上時代的節奏，更況且人人都用node，用自帶的npm管理不是更省心麼？(其實angular-baidu-map@2.0.0以前的版本也是支持bower的)

引入資源

最牛ES2015式

import {ngBaiduMap} from 'angular-baidu-map';

普通CommonJS式

var ngBaiduMap = require('angular-baidu-map').ngBaiduMap;

低調script直戳式

<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-baidu-map/dist/angular-baidu-map.js"></script>
<script type="text/javascript">
    var ngBaiduMap = window.ngBaiduMap;
</script>

直戳式之因此寫的可能是由於須要手動顯示指定AngularJS在angular-baidu-map.min.js以前加載

用法

做爲邁向AngularJS的第一步，咱們須要聲明對angular-baidu-map的依賴：

//這裏ngBaiduMap是上面獲得的變量
var app = angular.module('app', [ngBaiduMap]);

而後找到html或者template，挑選一處但願顯示地圖的位置，放置以下Directive:

<baidu-map options="mapOptions" ak="<your-ak>" offline="offlineOpts" class="<style-for-it>"></baidu-map>

• mapOptions 表達式，用來描述地圖自己。後面詳細介紹該對象參數

• ak 字符串，是你在百度開放平臺申請的AppKey，沒有這個，你的地圖顯示不出來的

• offlineOpts 表達式，用來控制離線後的友好支持，後面詳細介紹各參數。

• class或者style 必須爲baidu-map標籤指定一個樣式(寬、高必須)，不然地圖沒了形狀，顯示不出來

簡單示例

寫一個DemoController

app.controller('DemoController', ['$scope',
    function($scope) {

        //離線友好支持
        $scope.offlineOpts = {
            //無網絡時，沒10秒重試一次，看可否刷出地圖
            retryInterval: 10000,
            //無網絡時顯示的文字
            txt: 'Offline Mode'
        };

        //地圖顯示中心經緯度
        var longitude = 121.506191;
        var latitude = 31.245554;
        $scope.mapOptions = {
            center: {
                longitude: longitude,
                latitude: latitude
            },
            zoom: 17,//縮放級別
            //顯示一個標記
            markers: [{
                //標記座標
                longitude: longitude,
                latitude: latitude,
                //標記圖片
                icon: 'img/mappiont.png',
                //標記大小
                width: 49,
                height: 60,
                //點擊標記後的提示框標題
                title: 'Where',
                //點擊標記後的提示框內容
                content: 'Put description here'
            }]
        };
    }
]);

mapOptions詳解

Attribute	Type	Required	Description	Example
options.center.longitude	number	是	地圖中心點經度	121.506191
options.center.latitude	number	是	地圖中心點緯度	31.245554
options.zoom	number	是	地圖縮放級別，取值範圍3 ~ 19	9
options.navCtrl	boolean	否	是否顯示地圖導航控制條，默認顯示	false
options.scaleCtrl	boolean	否	是否顯示地圖比例尺，默認顯示	false
options.overviewCtrl	boolean	否	是否顯示縮略圖，默認顯示(在地圖右下角)	false
options.enableScrollWheelZoom	boolean	否	是否開啓鼠標滾輪調整地圖縮放級別，默認開啓	false
options.markers	array	否	地圖標註	[{longitude: longitude,latitude: latitude,icon: 'img/mappiont.png',width: 49,height: 60,title: 'Where',content: 'Put description here'}]
marker.longitude	number	是	標註經度	121.506191
marker.latitude	number	是	標註緯度	31.245554
marker.icon	string	否	標註自定義圖標URL	'img/mappiont.png'
marker.width	number	否	標註圖片寬度	40
marker.height	number	否	標註圖片高度	60
marker.title	string	否	點擊標註顯示的信息窗口裏的標題	'hello'
marker.content	string	否	點擊標註顯示的信息窗口裏的內容	'hello world'
marker.enableMessage	boolean	否	是否開啓短信發送功能，默認關閉	true

offlineOpts詳解

Attribute	Type	Required	Description	Example
offline.retryInterval	number	否	無網絡時重試間隔，默認30000浩渺	5000
offline.txt	string	否	無網絡時顯示的字符，默認"OFFLINE"	OFFLINE MODE

這裏有一個線上演示：github