本周学习记录

学习记录

一、Angular中引入地图

参考博客链接：https://blog.csdn.net/yuyinghua0302/article/details/80624274

申请百度地图密钥

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

这条命令中将自己申请的ak引入，在index中输入。

新建一个组件demo，在HTML文件中

<div id = "map" style="width:100%;height: 100px"></div>

在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);//开启鼠标滚轮缩放
  }
}

问题：正常来说做到这个步骤就可以显示出地图了，但此时程序报错显示未声明BMAP，在qige.io中找到这部分相关的知识点，但是应用后依然出现了这个情况，网上搜索后原因可能为：ak不正确，或者加载顺序出现问题，询问同学后还是没有解决。

二、其他学习内容

基本上都是在github上了解导入地图的相关知识，有很多用到Angular JS框架得出结果，下载源码进行尝试。
感觉对组件的处理更加熟练了，但是引入地图的问题还是没有得以解决。

三、下周计划

解决上周问题。
继续跟进项目进度