Angular2 引用高德地图

最新推荐文章于 2024-03-03 19:10:41 发布

KimmyJim

最新推荐文章于 2024-03-03 19:10:41 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular2

本文链接：https://blog.youkuaiyun.com/qq_24582305/article/details/81288887

Angular2 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Angular项目中引入并使用高德地图API，包括地图的基本配置、逆地理编码等功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（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;
            }
          });