Angular和百度地圖的結(jié)合實例代碼
更新時間：2016年10月19日 13:51:26 作者：小碼農(nóng)雯
最近在angular的項目，但是我用直接引用百度地圖的方法引進js,寫html,js代碼，發(fā)現(xiàn)報錯，接下來通過本文給大家介紹angular和百度地圖的結(jié)合,需要的朋友可以參考下
我現(xiàn)在做的一個項目是angular,但是我用直接引用百度地圖的方法引進js,寫html,js代碼，發(fā)現(xiàn)，我去，報錯了，我一開始還以為是百度地圖跟angular有沖突，然后我就去搜索啊，發(fā)現(xiàn)angular也有一個百度地圖插件，無奈我用了報錯了，網(wǎng)上說要用angular2版本才能兼容，但是我又不會下載2版本，所以我就放棄了，然后呢，我又去解決我一開始的那個錯誤了，首先來說一下百度地圖怎么用吧，很簡單，上代碼
首先引入js
<script type="text/javascript" src='http://api.map.baidu.com/api?v=2.0&ak=你的秘鑰'></script>
說明一下，秘鑰你可以在百度地圖的api官網(wǎng)申請哈
然后html
<div id='map'></div>
然后到了就直接js代碼，其實這些api里面全部都有的，但是我還是貼上來吧
var map = new BMap.Map("map"); // 創(chuàng)建Map實例
map.centerAndZoom(new BMap.Point(115.864528, 28.687675), 11); // 初始化地圖,設置中心點坐標和地圖級別
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.setCurrentCity("南昌"); // 設置地圖顯示的城市 此項是必須設置的
map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放
這些js代碼我一開始是用在body后面的,但是報錯了，什么錯呢，貼一下
getscript?v=2.0&ak=你的秘鑰&services=&t=20160928173929:1 Uncaught TypeError: Cannot read property 'fc' of undefined
恩出了這個錯，我去，這個錯誤的解決方法很簡單啊
就是把js代碼放在你用地圖的那個div下面，貼代碼
<div id='map'></div>
<script type="text/javascript">
var map = new BMap.Map("map"); // 創(chuàng)建Map實例
map.centerAndZoom(new BMap.Point(115.864528, 28.687675), 11); // 初始化地圖,設置中心點坐標和地圖級別
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.setCurrentCity("南昌"); // 設置地圖顯示的城市 此項是必須設置的
map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放
</script>
就這樣，就沒報錯了，地圖也完美呈現(xiàn)了，我去，說到底還是我太蠢了，我還以為真是angular有沖突了，然后轉(zhuǎn)念一想，不可能啊，然后就沒往angular的那個百度插件那里專研了。。。
相關文章
這篇文章主要介紹了Angular實現(xiàn)的進度條功能,結(jié)合實例形式較為詳細的分析了angular進度條功能的相關界面布局、功能等操作技巧,需要的朋友可以參考下2018-02-02
AngularJS 的輸入驗證是一個強大的功能,可以幫助開發(fā)者確保用戶輸入的數(shù)據(jù)是準確和完整的,這篇文章主要介紹了AngularJS 輸入驗證,需要的朋友可以參考下2024-07-07
本篇文章主要介紹了Angular 2實現(xiàn)自定義 雙向綁定 屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
在Angular的原生指令中有這幾個指令用來控制元素的展示與否，ng-show/ng-hide/ng-if和ng-switch。在angular性能優(yōu)化中，我們也常常會用到它。這篇文章主要給大家介紹了在Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程，需要的朋友可以參考。2017-05-05
AngularJS監(jiān)聽ng-repeat渲染完成的兩種方法
這篇文章主要介紹了AngularJS監(jiān)聽ng-repeat渲染完成的兩種方法,結(jié)合實例形式分析了AngularJS基于自定義指令及廣播事件實現(xiàn)監(jiān)聽功能的相關操作技巧,需要的朋友可以參考下2018-01-01
Angular.JS中指令ng-if的注意事項小結(jié)
這篇文章主要給大家分享了關于Angular.JS中指令ng-if的一點注意事項，分享出來供大家參考學習，文中介紹的還是相對來說比較詳細，對大家具有一定的參考借鑒價值，需要的朋友們下面來一起看看吧。2017-06-06
AngularJS的日期格式化有兩種形式，一種是在HTML頁面，一種是在JS代碼里，都是用到AngularJS的過濾器$filter2015-12-12
這篇文章主要給大家介紹了Angular.JS通過指令操作DOM的方法，文中給出了詳細的介紹和示例代碼，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
詳解什么是@ngrx/store開發(fā)包中的MemoizedSelector
這篇文章主要為大家介紹了@ngrx/store開發(fā)包中的MemoizedSelector使用分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
這篇文章主要為大家詳細介紹了AngularJS表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10