Angular 调用百度地图API接口
2024-08-25 03:01:09
Angular 调用百度地图API接口
参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274
下面简单介绍一下如何在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>
另外,如果需要去除百度地图左下角的logo,仅需要在styles.scss中添加如下代码就可以了。(但是我个小菜鸡没有去成功)。
.anchorBL{
display:none;
}
第三步:新建一个组件,在他的HTML文件中:
<div id = "map" style="width:100%;height: 100px"></div>
注意:我在Angular中按照官网引入百度地图js,不提示错误,地图就是显示出来。折腾了半天,最后发现原来是没有设置地图显示的宽和高。。。
在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);//开启鼠标滚轮缩放
}
}
第四步:运行项目,就可以看到所引入的地图啦!
百度地图 javascript api 案例地址:http://lbsyun.baidu.com/jsdemo.htm#canvaslayer
在ts文件中写的语法和javascript api 基本一样,看懂上边的例子就会用。
最新文章
- SVG:linearGradient渐变在直线上失效的问题解决方案
- Python进阶【第二篇】多线程、消息队列queue
- Topcoder SRM558 1000 SurroundingGame
- android 开发:shape和selector和layer-list的(详细说明)
- SQLChop、SQLWall(Druid)、PHP Syntax Parser Analysis
- netstat miscellaneousness
- 2.5---链表来进行加法,链式A+B(CC150)
- NSA,放开那头魔兽!
- [转]基于AngularJS的前端架构(上)
- jdk、maven配置
- Python 基础篇:介绍
- 自定义Window 服务
- C语言对数组取地址
- php 之 数据访问 增删改查
- java 访问后台方法顺序混乱
- Java 工具 JUnit单元测试
- AnimationSet的使用
- time series analysis
- Linux-Shell编程之判断文件类型
- IP通信基础课堂笔记----关于数链层
热门文章
- pdo一次插入多条数据的2种实现方式
- Unity网络通讯(一)获取计算机的MAC地址
- jQuery---jQuery对象与DOM对象的区别
- 给阿里云主机添加swap分区,解决问题:c++: internal compiler error: Killed (program cc1plus)
- ios 软键盘弹出布局被顶上去 已解决
- Unable to load authentication plugin &#39;caching_sha2_password&#39;
- C++-hihoCode1546-[快速幂]
- 浅析ReDoS
- 题解【洛谷P3478】[POI2008]STA-Station
- C++——类与对象