亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

AngularJS中使用百度地圖

沈建明 / 3212人閱讀

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

前言

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

源碼地址：angular-baidu-map

效果圖是這樣的：

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

安裝

最low式

直接下載使用，為什么這種方式low，因為三方庫不用個什么包管理工具，還隨著自己的項目源碼提交，浪費空間就算了，也丟了版本追蹤的能力...吧啦吧啦吧啦

推薦式

npm install angular-baidu-map --save
有人問為什么不提供bower支持，那我建議你真該多逛逛社區(qū)了，bower已是明日黃花，諸多缺陷已經(jīng)跟不上時代的節(jié)奏，更何況人人都用node，用自帶的npm管理不是更省心么？(其實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直戳式




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

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

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

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

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

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

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

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

簡單示例

寫一個DemoController

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

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

        //地圖顯示中心經(jīng)緯度
        var longitude = 121.506191;
        var latitude = 31.245554;
        $scope.mapOptions = {
            center: {
                longitude: longitude,
                latitude: latitude
            },
            zoom: 17,//縮放級別
            //顯示一個標(biāo)記
            markers: [{
                //標(biāo)記坐標(biāo)
                longitude: longitude,
                latitude: latitude,
                //標(biāo)記圖片
                icon: "img/mappiont.png",
                //標(biāo)記大小
                width: 49,
                height: 60,
                //點擊標(biāo)記后的提示框標(biāo)題
                title: "Where",
                //點擊標(biāo)記后的提示框內(nèi)容
                content: "Put description here"
            }]
        };
    }
]);
mapOptions詳解
Attribute Type Required Description Example
options.center.longitude number 是 地圖中心點經(jīng)度 121.506191
options.center.latitude number 是 地圖中心點緯度 31.245554
options.zoom number 是 地圖縮放級別，取值范圍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)整地圖縮放級別，默認(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 否 點擊標(biāo)注顯示的信息窗口里的標(biāo)題 "hello"
marker.content string 否 點擊標(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ò)時重試間隔，默認(rèn)30000浩渺 5000
offline.txt string 否 無網(wǎng)絡(luò)時顯示的字符，默認(rèn)"OFFLINE" OFFLINE MODE

這里有一個線上演示：github

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79384.html

相關(guān)文章

  • angular - 收藏集 - 掘金

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

    AlexTuan 評論0 收藏0

  • Android Studio導(dǎo)入并顯示國內(nèi)地圖SDK步驟對比以及需要注意的點（百度地圖和高德地圖為例

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

    lavor 評論0 收藏0

  • Android Studio導(dǎo)入并顯示國內(nèi)地圖SDK步驟對比以及需要注意的點（百度地圖和高德地圖為例

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

    xiangchaobin 評論0 收藏0

  • 百度地圖開發(fā)實例番外篇--實用方法（持續(xù)更新）

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

    CocoaChina 評論0 收藏0

發(fā)表評論

0條評論

沈建明

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<