Angular引入百度地图教程

下面简单介绍一下如何在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>

（注意，百度地图js必须在根组件index.html页面引入，否则会报错）
另外，如果需要去除百度地图左下角的logo，仅需要在styles.scss中添加如下代码就可以了。

.anchorBL{
  display:none;
}

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

第四步：运行项目，就可以看到所引入的地图啦.
转载https://www.itsvse.com/thread-7481-1-1.html