(1)在全局中引用高德地图api(楼主在index.html 里引用)
<script src="http://webapi.amap.com/maps?v=1.4.6&key=你的高德key值"></script>
(2)在各个组件中引用高德地图
component.ts 文件
public ngOnInit() {
const mapObj = new AMap.Map('mapviewcontainer', {
resizeEnale: true,
zoom: 15,
center: [113.592618, 22.942735]
});
}
.html 文件
<div class="page-wrapper">
<div style="width: 100%; height: 100%;padding-top: 44px;">
<div id="mapviewcontainer" style="width: 1730px; height: 900px;"></div>
</div>
</div>
这就可以简单地引用高德地图了
当引用高德地图的插件时,Angular会报不是其构造函数,此时需在引用api时加上对应的插件即可,例如引用高德的逆向解析地址: AMap.Geocoder
<script src="http://webapi.amap.com/maps?v=1.4.6&key=你的高德key值&plugin=AMap.Geocoder"></script>
let geocoder = new AMap.Geocoder();
geocoder.getAddress(lnglatXY, (status, result) => {
if (status === 'complete' && result.info === 'OK') {
this.addressname = result.regeocode.formattedAddress;
}
});