AngularJS中使用百度地圖

沈建明發(fā)布于2019-08-19 18:15 / 3164人閱讀

摘要：尤其，對(duì)于組件化起了非常大的作用。今天就簡單介紹一下我的一個(gè)懶人組件百度地圖。后面詳細(xì)介紹該對(duì)象參數(shù)字符串，是你在百度開放平臺(tái)申請(qǐng)的，沒有這個(gè)，你的地圖顯示不出來的表達(dá)式，用來控制離線后的友好支持，后面詳細(xì)介紹各參數(shù)。

前言

AngularJS作為一個(gè)成功的框架，營造出了完備的生態(tài)系統(tǒng)。尤其Directive，對(duì)于組件化起了非常大的作用。很多時(shí)候，如我這般懶人，網(wǎng)上搜一搜，就找到一個(gè)合用的Directive，省了自己諸多麻煩。今天就簡單介紹一下我的一個(gè)懶人組件－百度地圖。

源碼地址：angular-baidu-map

效果圖是這樣的：

注：本章介紹的是AngularJS的百度地圖指令組件，如果需要angular2支持的，請(qǐng)看這里angular2-baidu-map

安裝

最low式

直接下載使用，為什么這種方式low，因?yàn)槿綆觳挥脗€(gè)什么包管理工具，還隨著自己的項(xiàng)目源碼提交，浪費(fèi)空間就算了，也丟了版本追蹤的能力...吧啦吧啦吧啦

推薦式

npm install angular-baidu-map --save

有人問為什么不提供bower支持，那我建議你真該多逛逛社區(qū)了，bower已是明日黃花，諸多缺陷已經(jīng)跟不上時(shí)代的節(jié)奏，更何況人人都用node，用自帶的npm管理不是更省心么？(其實(shí)angular-baidu-map@2.0.0之前的版本也是支持bower的)

引入資源

最牛ES2015式

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

普通CommonJS式

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

低調(diào)script直戳式

直戳式之所以寫的多是因?yàn)樾枰謩?dòng)顯示指定AngularJS在angular-baidu-map.min.js之前加載

用法

作為邁向AngularJS的第一步，我們需要聲明對(duì)angular-baidu-map的依賴：

//這里ngBaiduMap是上面得到的變量
var app = angular.module("app", [ngBaiduMap]);

然后找到html或者template，挑選一處希望顯示地圖的位置，放置如下Directive:

mapOptions 表達(dá)式，用來描述地圖本身。后面詳細(xì)介紹該對(duì)象參數(shù)

ak 字符串，是你在百度開放平臺(tái)申請(qǐng)的AppKey，沒有這個(gè)，你的地圖顯示不出來的

offlineOpts 表達(dá)式，用來控制離線后的友好支持，后面詳細(xì)介紹各參數(shù)。

class或者style 必須為baidu-map標(biāo)簽指定一個(gè)樣式(寬、高必須)，否則地圖沒了形狀，顯示不出來

簡單示例

寫一個(gè)DemoController

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

        //離線友好支持
        $scope.offlineOpts = {
            //無網(wǎng)絡(luò)時(shí)，沒10秒重試一次，看能否刷出地圖
            retryInterval: 10000,
            //無網(wǎng)絡(luò)時(shí)顯示的文字
            txt: "Offline Mode"
        };

        //地圖顯示中心經(jīng)緯度
        var longitude = 121.506191;
        var latitude = 31.245554;
        $scope.mapOptions = {
            center: {
                longitude: longitude,
                latitude: latitude
            },
            zoom: 17,//縮放級(jí)別
            //顯示一個(gè)標(biāo)記
            markers: [{
                //標(biāo)記坐標(biāo)
                longitude: longitude,
                latitude: latitude,
                //標(biāo)記圖片
                icon: "img/mappiont.png",
                //標(biāo)記大小
                width: 49,
                height: 60,
                //點(diǎn)擊標(biāo)記后的提示框標(biāo)題
                title: "Where",
                //點(diǎn)擊標(biāo)記后的提示框內(nèi)容
                content: "Put description here"
            }]
        };
    }
]);

mapOptions詳解

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

offlineOpts詳解

Attribute	Type	Required	Description	Example
offline.retryInterval	number	否	無網(wǎng)絡(luò)時(shí)重試間隔，默認(rèn)30000浩渺	5000
offline.txt	string	否	無網(wǎng)絡(luò)時(shí)顯示的字符，默認(rèn)"OFFLINE"	OFFLINE MODE