ホームページ  >  記事  >  ウェブフロントエンド  >  AngularJS と Baidu Maps の組み合わせの例

AngularJS と Baidu Maps の組み合わせの例

高洛峰
高洛峰オリジナル
2016-12-09 14:26:251011ブラウズ

現在取り組んでいるプロジェクトはAngularなのですが、Baidu Mapを直接参照してjsを導入し、htmlとjsのコードを書いたところ、最初はBaidu Mapの間で競合があるのか​​と思い、エラーを報告しました。 angular と検索したところ、angular にも Baidu マップ プラグインがあることがわかりました。残念ながら、それを使用したところ、互換性を保つには angular2 バージョンを使用する必要があるとインターネットで報告されました。 2 バージョンのダウンロード方法が分からなかったので諦めました。その後、最初に犯した間違いを解決しようとしましたが、最初に Baidu Maps の使用方法について説明します。とても簡単です。まず、コードを書くときに js を導入します

45df3c7baf5fb941b285ba181fe0cbbb2cacc6d41bbb37262a98f745aa00fbf0


百度地図の API 公式 Web サイトで秘密キーが見つかることを説明します

を適用してから html

4fda439add4228567aa1d2a1810ddfe016b28748ea4df4d9c2150843fecfba68


実際、これらの API はすべて利用可能ですが、とりあえず投稿しておきます

最初はこれらの JS コードを本文の後ろで使用しましたが、エラーが報告されました。何が問題ですか?投稿してください

getscript?v=2.0&ak=your Secret key&services=&t=20160928173929:1 Uncaught

TypeError: Unknown のプロパティ 'fc' を読み取れません

任せてください、このエラーの解決策は非常に簡単です


マップを使用する div の下に js コードを配置し、そのコードを貼り付けるだけです

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);   //开启鼠标滚轮缩放

以上です。エラーは報告されず、マップは結局のところ、私は angular と競合していると思いましたが、それは不可能だと思い、angular 用の Baidu プラグインを勉強しませんでした。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。