angular项目使用地图

一日不学甚慌

已于 2022-09-14 17:08:30 修改

阅读量422

点赞数 1

分类专栏： angular 文章标签： angular.js 前端 javascript

于 2022-09-14 17:06:29 首次发布

本文链接：https://blog.csdn.net/Ccc_bk/article/details/126855665

版权

angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

百度地图使用指南🔍

注册百度账号
申请成为百度开发者
获取密钥（AK）

index.html文件

// head标签中导入
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你申请的密钥"></script>

map.component.html文件

<div #mapContainer style="width: 100%; height:100%"></div>

map.component.ts文件

import { OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, AfterViewInit {
  @ViewChild('mapContainer') mapDom!: ElementRef<HTMLElement>
  constructor() { }
  ngOnInit(): void { };
  ngAfterViewInit(): void {
    let GL = (window as any).BMapGL;
    let map = new GL.Map(this.mapDom.nativeElement);
    map.centerAndZoom('上海市', 12);  //  初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);  // 设置鼠标滑轮缩放
  }
}