Angular引入百度地图js

逃离我推掉我的手 2022-04-22 02:08 293阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWd1b2NoYW8xMDI0_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWd1b2NoYW8xMDI0_size_16_color_FFFFFF_t_70 1][]

第三部，创建一个组件

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

运行就可以看到地图了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWd1b2NoYW8xMDI0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181101155610441.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWd1b2NoYW8xMDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWd1b2NoYW8xMDI0_size_16_color_FFFFFF_t_70 1]: /images/20220422/6f7ba747fe3d41ea84de83ffd4968505.png

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 引入百度地图

注意vue文件中调用地图，在mounted中调用无用时候，要在this.$nextTick()方法中调用，如下 this.$nextTick(() => \{

小咪咪/ 2022年10月30日 11:24/ 0 赞/ 176 阅读

相关 js 百度地图api

[百度地图JavaScript API][JavaScript API]是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支

拼搏现实的明天。/ 2022年06月10日 03:51/ 0 赞/ 323 阅读

相关 vue项目直接引入百度地图

前一个博客中关于后台管理的搭建使用了百度地图，这里简单记录一下如何使用前期准备：如果使用v1.5之后的版本需要百度ak，需要本人去申请。地址传送门：[

爱被打了一巴掌/ 2022年05月20日 08:38/ 0 赞/ 219 阅读

相关 angularjs 简单封装百度地图 angular-BMap

angular-BMap 详细介绍 angular-BMap 1. angularjs 简单封装百度地图; 2. 在app.js中引用angularMap模块,如：an

骑猪看日落/ 2022年05月19日 00:04/ 0 赞/ 218 阅读

相关 Angular引入百度地图js

第一步：申请百度地图密钥，很简单，去网上随便找教程第二步：在Angular项目中引入百度地图API文件，在index.html中引入 ![watermark_type_Z

逃离我推掉我的手/ 2022年04月22日 02:08/ 0 赞/ 294 阅读

相关 js+百度地图API

js与百度地图API实例： <div id='address'></div> <script src="http://api.map.baidu.com/ap

旧城等待，/ 2022年04月16日 03:59/ 0 赞/ 373 阅读

相关 JS百度地图显示

步骤 1.百度地图API接口:[http://lbsyun.baidu.com/][http_lbsyun.baidu.com] 2.![在这里插入图片描述][wat

我不是女神ヾ/ 2022年03月02日 13:30/ 0 赞/ 361 阅读

相关 vue引入百度地图

1.创建一个vue项目输入指令 npm install vue-baidu-map –-save 2.在index.html 里面引入 <script type

雨点打透心脏的1/2处/ 2021年11月27日 07:14/ 0 赞/ 330 阅读

相关 vue中引入百度地图

方法一：通过cdn引入一，申请密匙（[http://lbsyun.baidu.com/apiconsole/key?application=key\/home

系统管理员/ 2021年07月25日 14:46/ 0 赞/ 616 阅读

相关百度地图SDK注册、引入

[百度地图引入步骤][Link 1] 代码示例: <html> <head> <meta charset="utf-8"> <meta

朱雀/ 2021年07月24日 23:30/ 0 赞/ 473 阅读