AngularJS中使用百度地圖

沈建明發布于2019-08-19 18:15 / 3153人閱讀

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

前言

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直戳式

直戳式之所以寫的多是因為需要手動顯示指定AngularJS在angular-baidu-map.min.js之前加載

用法

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

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

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

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

云服務器 GPU云服務器 ios百度地圖使用百度地圖百度地圖百度地圖標注

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79384.html

angular - 收藏集 - 掘金

摘要：如何在中使用動畫前端掘金本文講一下中動畫應用的部分。與的快速入門指南推薦前端掘金是非常棒的框架，能夠創建功能強大，動態功能的。自發布以來，已經廣泛應用于開發中。如何在 Angular 中使用動畫 - 前端 - 掘金本文講一下Angular中動畫應用的部分。首先，Angular本生不提供動畫機制，需要在項目中加入Angular插件模塊ngAnimate才能完成Angular的動畫機制...

AlexTuan 2019-08-20 17:19 評論0 收藏0
Android Studio導入并顯示國內地圖SDK步驟對比以及需要注意的點（百度地圖和高德地圖為例

摘要：本文為第一次導入地圖類，以百度地圖和高德地圖為例，騰訊地圖后續加入。高德或百度地圖高德或百度地圖高德或百度地圖百度地圖獨有管理地圖生命周期合理管理地圖生命周期。本文為第一次導入地圖類SDK，以百度地圖和高德地圖為例，騰訊地圖后續加入。本文若有不當之處以及勘誤，歡迎留言指正。百度和高德地圖開放平臺官網鏈接百度地圖開放平臺高德開放平臺步驟 1.獲取KEY 在相應的國內SDK開發者...

lavor 2019-08-27 10:56 評論0 收藏0
Android Studio導入并顯示國內地圖SDK步驟對比以及需要注意的點（百度地圖和高德地圖為例

摘要：本文為第一次導入地圖類，以百度地圖和高德地圖為例，騰訊地圖后續加入。高德或百度地圖高德或百度地圖高德或百度地圖百度地圖獨有管理地圖生命周期合理管理地圖生命周期。本文為第一次導入地圖類SDK，以百度地圖和高德地圖為例，騰訊地圖后續加入。本文若有不當之處以及勘誤，歡迎留言指正。百度和高德地圖開放平臺官網鏈接百度地圖開放平臺高德開放平臺步驟 1.獲取KEY 在相應的國內SDK開發者...

xiangchaobin 2019-08-19 11:06 評論0 收藏0
百度地圖開發實例番外篇--實用方法（持續更新）

摘要：一前言在使用百度地圖開發的過程中，查閱百度地圖官網基本上就能滿足開發的需求，但是有時候需要設置一些東西，很難在官網上查閱到相關的方法技巧。希望百度地圖能夠越來越強大，這樣開發者就可以愉快的開發了一前言在使用百度地圖開發的過程中，查閱百度地圖官網demo基本上就能滿足開發的需求，但是有時候需要設置一些東西，很難在官網上查閱到相關的方法技巧。筆者特意把開發過程中遇到的一些疑難雜癥和解...

CocoaChina 2019-08-22 13:53 評論0 收藏0