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 基本一样，看懂上边的例子就会用。

Angular 调用导入百度地图API接口相关推荐

调用百度地图API接口制作热力图
调用百度地图API接口制作热力图 Python学了很久,也做了一些机器学习的demo,利用matolotlib库做过一些可视化.今天呢想尝试做一下热力图.先PO一张我最终效果图. 因为数据原因,效果一 ...
Python3调用百度地图API接口获取结构化地址
在实际应用中,我们也许会有这样的需求,输入一个地名,就能够知道这个地方的准确地址.例如输入"清华大学",我们就可以知道清华大学在北京的哪个区哪条道路.正好百度地图开放平台服务提供了 ...
python 接入百度地图数据包下载_Python爬虫-利用百度地图API接口爬取数据并保存至MySQL数据库...
首先,我这里有一份相关城市以及该城市的公园数量的txt文件: 分析-02.png 其次,利用百度地图API提供的接口爬取城市公园的相关信息. 所利用的API接口有两个: 1.http://api.ma ...
利用百度地图API接口自制地图
首先注册成为开发者百度地图开放平台 | 百度地图API SDK | 地图开发创建一个服务器端应用,这个应用是为了查询地点的经纬度把地点存一个csv文件,为了查询准确把市和区补在地点前面,通过pyt ...
安卓开发——在应用中简单调用Android百度地图API SDK
目录需求展示效果展示: 申请百度地图API密钥配置ANDROID STUDIO 编写项目代码运行项目需求展示利用百度地图API定位到当前所在位置,并显示所在的经纬度和地址信息. 效果展示: ...
php 百度地图api获取经纬度,调用百度地图API接口获取地铁站的经纬度信息
今天我们来看一下,如何通过百地图API来获取地点的经纬度.首先百度地图提供了强大的API接口,我们可以通过调用它来实现目的.这是网址:https://lbsyun.baidu.com/.首先想要调用A ...
Python 调用百度地图API接口查询详细地址名称 [转载]
需要批量查询文件中的地址在百度地图中的名称与坐标 Step 1 . 下载chromedriver 下载地址 : ChromeDriver下载. 注意需要下载和chrome浏览器相同版本的driv ...
获取天地图API并调用不同的地图API接口
文章目录概要 1.如何获取地图API 2.如何使用天地图API 2.1 注意请求示例中的代码概要本篇文章主要是想将我在学习webGIS过程只能遇到的一些问题分享给需要的朋友,喜欢的可以点赞给点鼓 ...
python百度地图api经纬度_从百度地图API接口批量获取地点的经纬度
1.[代码][Python]代码 #!/usr/bin/python #coding:utf-8 import xlrd import xlwt import requests import urll ...

Angular 调用导入百度地图API接口