第一步:申请百度地图**,很简单,去网上随便找教程

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

Angular引入百度地图jsAngular引入百度地图js

 

第三部,创建一个组件

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);
  }
}
 

运行就可以看到地图了

相关文章:

  • 2021-09-01
  • 2021-06-25
  • 2021-10-17
  • 2022-12-23
  • 2022-12-23
  • 2021-04-22
  • 2021-08-13
猜你喜欢
  • 2021-12-26
  • 2021-10-18
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-01
  • 2021-12-03
相关资源
相似解决方案