Angular引入百度地图js

最新推荐文章于 2024-03-26 23:59:35 发布

liuguochao1024

最新推荐文章于 2024-03-26 23:59:35 发布

阅读量2.2k

点赞数 3

文章标签： Angular引入百度地图js

本文链接：https://blog.youkuaiyun.com/liuguochao1024/article/details/83621863

版权

本文介绍如何在Angular项目中集成百度地图API，包括申请密钥、引入API文件及创建地图组件的具体步骤。通过实例演示了如何设置地图中心点和缩放级别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：申请百度地图密钥，很简单，去网上随便找教程

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

第三部，创建一个组件

html部分

<div id = "map" style="width:100%;height: 100%"></div>
js部分

import { Component,OnInit } from '@angular/core';
import { NavController,NavParams } from 'ionic-angular';
declare var BMap: any;
@Component({
selector: 'page-map',
templateUrl: 'map.html'
})
export class MapPage {
thisX = "";
thisY = "";
constructor(public navCtrl: NavController,public params:NavParams) {
this.thisX = this.params.get('x');
this.thisY = this.params.get('y');
}
ngOnInit() {
const map = new BMap.Map('map');//创建地图实例
const point = new BMap.Point(this.thisX,this.thisY);//创建点坐标
map.centerAndZoom(point, 15);//初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
console.log(map);
}
}