Angular：引用百度地图教程

最新推荐文章于 2024-06-16 09:41:59 发布

Angular baby

最新推荐文章于 2024-06-16 09:41:59 发布

阅读量1.6k

点赞数

分类专栏：前端开发 Angular6基础学习

本文链接：https://blog.csdn.net/qq_36451496/article/details/96111699

版权

前端开发同时被 3 个专栏收录

142 篇文章 3 订阅

订阅专栏

Angular6基础学习

59 篇文章 5 订阅

订阅专栏

Angular6

52 篇文章 0 订阅

订阅专栏

今天实现了在项目中引用百度地图，先看一下效果图：

第一步：先在百度地图开放平台申请百度地图密钥（申请链接：http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey）按照网站提示填写应用信息，

申请好之后，记住自己的ak码。注意如果在浏览器使用的话，因新系统升级，“服务端AK”不再支持浏览器端使用；在浏览器端使用，请选择“浏览器端AK”，例如JavaScript API只支持浏览器类型AK。
对于以前申请的服务端AK，不变更即不受影响，仍支持浏览器端使用；如更新老的服务端AK，再次保存，则按新创建AK处理，不再支持浏览器端使用。

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

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>采购供应平台</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
  <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=xxxxxxxxxx">
  </script>
</head>

<body>
  <app-root></app-root>
</body>

</html>

其中，ak后面配置自己申请好的应用的ak：

注意，百度地图必须在根组件index.html页面引入，否则会报错

第三步：新建一个组件显示地图，其中html页面上直接用一个新的div展示就可以：

<app-xcmg-content [pageTitle]="'地图'">
  <div class="main-content">
    <div id="map"></div>
  </div>
</app-xcmg-content>

组件的样式文件scss文件中，注意调整地图的样式，调整长宽都为100%，否则可能不能正常显示：

#map {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.anchorBL {
  display: none;
}

ts组件类文件中：

import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
declare var BMap: any;

@Component({
  selector: 'app-map-list',
  templateUrl: './map-list.component.html',
  styleUrls: ['./map-list.component.scss'],
})
export class MapListComponent implements OnInit, AfterViewInit, OnDestroy {


  constructor(
  ) {
  }


  ngOnInit(): void {
    const map = new BMap.Map('map');                   //创建地图实例
    const point = new BMap.Point(116.404, 39.915);     //创建点坐标
    map.centerAndZoom(point, 15);                      //初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);                   //开启鼠标滚轮缩放
    console.log(map);
  }


  ngAfterViewInit() {
    setTimeout(() => {
    }, 10);
  }

  ngOnDestroy(): void {

  }
}

运行项目，就可以看到地图在页面中显示了~

Angular baby

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Angular：引用百度地图教程

今天实现了在项目中引用百度地图，先看一下效果图：第一步：先在百度地图开放平台申请百度地图密钥（申请链接：http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey）按照网站提示填写应用信息，申请好之后，记住自己的ak码。注意如果在浏览器使用的话，因新系统升级，“服务端AK”不再支持浏览器端使用；在浏览器端使用，请选择...
复制链接

扫一扫

专栏目录