AngularJS 與百度地圖的結合執行個體_AngularJS

來源:互聯網
上載者:User

我現在做的一個項目是angular,但是我用直接引用百度地圖的方法引進js,寫html,js代碼,發現,我去,報錯了,我一開始還以為是百度地圖跟angular有衝突,然後我就去搜尋啊,發現angular也有一個百度地圖外掛程式,無奈我用了報錯了,網上說要用angular2版本才能相容,但是我又不會下載2版本,所以我就放棄了,然後呢,我又去解決我一開始的那個錯誤了,發現,瑪德我傻逼了,首先來說一下百度地圖怎麼用吧,很簡單,上代碼

首先引入js

<script type="text/javascript" src='http://api.map.baidu.com/api?v=2.0&ak=你的秘鑰'></script>

說明一下,秘鑰你可以在百度地圖的api官網申請哈

然後html

<div id='map'></div>

然後到了就直接js代碼,其實這些api裡面全部都有的,但是我還是貼上來吧

var map = new BMap.Map("map");  // 建立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");  // 建立Map執行個體        map.centerAndZoom(new BMap.Point(115.864528, 28.687675), 11); // 初始化地圖,設定中心點座標和地圖層級        map.addControl(new BMap.MapTypeControl());  //添加地圖類型控制項        map.setCurrentCity("南昌");     // 設定地圖顯示的城市 此項是必須設定的        map.enableScrollWheelZoom(true);   //開啟滑鼠滾輪縮放    </script>

就這樣,就沒報錯了,地圖也完美呈現了,我去,說到底還是我太蠢了,我還以為真是angular有衝突了,然後轉念一想,不可能啊,然後就沒往angular的那個百度外掛程式那裡專研了。。。

感謝閱讀,希望能協助到大家,謝謝大家對本站的支援!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.