今天实现了在项目中引用百度地图,先看一下效果图:
第一步:先在百度地图开放平台申请百度地图密钥(申请链接: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:
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=自己的ak写在这里"></script>
注意,百度地图必须在根组件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 {
}
}
运行项目,就可以看到地图在页面中显示了~