AngularJS 與百度地圖的結(jié)合實例
我現(xiàn)在做的一個項目是angular,但是我用直接引用百度地圖的方法引進(jìn)js,寫html,js代碼，發(fā)現(xiàn)，我去，報錯了，我一開始還以為是百度地圖跟angular有沖突，然后我就去搜索啊，發(fā)現(xiàn)angular也有一個百度地圖插件，無奈我用了報錯了，網(wǎng)上說要用angular2版本才能兼容，但是我又不會下載2版本，所以我就放棄了，然后呢，我又去解決我一開始的那個錯誤了，發(fā)現(xiàn)，瑪?shù)挛疑当屏?，首先來說一下百度地圖怎么用吧，很簡單，上代碼
首先引入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); // 初始化地圖,設(shè)置中心點坐標(biāo)和地圖級別
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.setCurrentCity("南昌"); // 設(shè)置地圖顯示的城市 此項是必須設(shè)置的
map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
這些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); // 初始化地圖,設(shè)置中心點坐標(biāo)和地圖級別
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.setCurrentCity("南昌"); // 設(shè)置地圖顯示的城市 此項是必須設(shè)置的
map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
</script>
就這樣，就沒報錯了，地圖也完美呈現(xiàn)了，我去，說到底還是我太蠢了，我還以為真是angular有沖突了，然后轉(zhuǎn)念一想，不可能啊，然后就沒往angular的那個百度插件那里專研了。。。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
今天小編就為大家分享一篇angularjs手動識別字符串中的換行符方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了angularjs指令之綁定策略（@、=、&）,AngularJS提供了幾種方法能夠?qū)⒅噶顑?nèi)部的隔離作用域，同指令外部的作用域進(jìn)行數(shù)據(jù)綁定。2017-04-04
這篇文章主要介紹了詳解Angular Karma測試的持續(xù)集成實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
今天小編就為大家分享一篇對angularJs中自定義指令replace的屬性詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
AngularJS基礎(chǔ) ng-click 指令示例代碼
本文介紹AngularJS ng-click 指令,這里整理了ng-click指令的基礎(chǔ)知識并且附有簡單示例代碼和實現(xiàn)效果圖,有需要的小伙伴參考下2016-08-08
Angularjs 手寫日歷的實現(xiàn)代碼（不用插件）
本篇文章介紹了Angularjs 手寫日歷的實現(xiàn)代碼（不用插件），整理了詳細(xì)的代碼，非常具有實用價值，需要的朋友可以參考下2017-10-10
下面小編就為大家?guī)硪黄獪\談angular懶加載的一些坑。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了再談Angular4 臟值檢測(性能優(yōu)化)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
淺談angular2的http請求返回結(jié)果的subcribe注意事項
下面小編就為大家?guī)硪黄獪\談angular2的http請求返回結(jié)果的subcribe注意事項。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
Angular2中如何使用ngx-translate進(jìn)行國際化
本篇文章主要介紹了Angular2中使用ngx-translate進(jìn)行國際化，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05