Angular 調用百度地圖API接口

Angular 調用百度地圖API接口

 參考原文：https://blog.csdn.net/yuyinghua0302/article/details/80624274

 下面簡單介紹一下如何在Angular中使用百度地圖。

 第一步：申請百度地圖密鑰。

http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

 

第二步：在Angular項目中引入百度地圖API文件，在index.html中引入。

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

另外，若是須要去除百度地圖左下角的logo，僅須要在styles.scss中添加以下代碼就能夠了。（可是我個小菜雞沒有去成功）。

.anchorBL{
  display:none;
}

第三步：新建一個組件，在他的HTML文件中：

<div id = "map" style="width:100%;height: 100px"></div>

 　　注意：我在Angular中按照官網引入百度地圖js，不提示錯誤，地圖就是顯示出來。折騰了半天，最後發現原來是沒有設置地圖顯示的寬和高。。。

 在component.ts文件中：

import { Component, OnInit } from '@angular/core';
declare var BMap: any;
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {
  constructor() {}
  ngOnInit() {
    const map = new BMap.Map('map');//建立地圖實例
    const point = new BMap.Point(116.404, 39.915);//建立點座標
    map.centerAndZoom(point, 15);//初始化地圖，設置中心點座標和地圖級別
    map.enableScrollWheelZoom(true);//開啓鼠標滾輪縮放
  }
}

 第四步：運行項目，就能夠看到所引入的地圖啦！

 

百度地圖 javascript api 案例地址：http://lbsyun.baidu.com/jsdemo.htm#canvaslayer 

 

在ts文件中寫的語法和javascript api 基本同樣，看懂上邊的例子就會用。