在前端开发中，因为要实现地图的功能，在线上使用腾讯地图api是比较常见的。而要实现在 Angular 中使用腾讯地图， 则需要使用 npm 包 ng-qqmap。
本文将详细介绍如何在 Angular 项目中使用 ng-qqmap，包括安装、引入、地图API 调用等操作，最后提供一个基础示例供大家参考。
安装
在 Angular 项目中使用 ng-qqmap，首先需要安装该 npm 包。
可使用以下命令进行安装：
npm install ng-qqmap --save
安装完成后，该包将会自动添加到项目的 package.json 文件中。
引入
在使用 ng-qqmap 提供的功能之前，需要先引入该包。在 app.module.ts 文件中加入以下代码：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------
-----------
------------- ---------------
-------- -
--------------
---------------------
------- ----------- ----
--
--
---------- ---
---------- ---------------
--
------ ----- --------- --引入之后，就可以在项目中使用 ng-qqmap 的功能了。
地图API调用
下面介绍一些 ng-qqmap 提供的基础方法
创建地图
创建一个地图，可以使用 qq.maps.Map() 方法，它包括以下参数：
qq.maps.Map(dom: HTMLElement, options: MapOptions)
其中：
dom：地图容器的 DOM 容器。options：地图选项。
下面的示例代码即为在一个 div 中显示地图：
<div #container style="height: 300px;"></div>
-- -------------------- ---- -------
------ - ---------- ------- ---------- ---------- - ---- ----------------
------- --- --- -- ---- -- --
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
----------------------- ---------- -----------
---------- -
----- ------ - --- ------------------------- ------------
----- --- - --- ----------------------------------------- -
------- -------
----- --
---
-
-在上面的代码中，我们首先声明了 qq 变量，然后在 ngOnInit 中使用 qq.maps.Map() 方法创建了一个地图，将其放在 DOM 容器中显示。
标记点
标记点的添加，可以使用 qq.maps.Marker 方法。
例如，我们想在地图上添加一个北京市中心的标记点：
const center = new qq.maps.LatLng(39.916527, 116.397128);
const marker = new qq.maps.Marker({
position: center,
map: map
});在上面示例中，position 参数设置了标记点的位置，map 参数设置了该标记点需要添加到哪个地图中。
地图事件
ng-qqmap 同样支持地图事件的监听。例如，我们希望在点击地图时对应经纬度位置进行打印：
qq.maps.event.addListener(map, 'click', event => {
console.log('经度：' + event.latLng.getLng() + '，纬度：' + event.latLng.getLat());
})在上面示例中，我们使用 qq.maps.event.addListener() 方法监听地图的点击事件，在回调方法中获取到该点坐标，并进行打印。
示例代码
上面讲解了如何安装与使用 ng-qqmap，在最后提供一个完整的示例代码。可以使用该示例代码进行测试：
<div #container style="height: 400px;"></div>
-- -------------------- ---- -------
------ - ---------- ------- ---------- ---------- - ---- ----------------
------- --- --- -- ---- -- --
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
----------------------- ---------- -----------
---------- -
----- ------ - --- ------------------------- ------------
----- --- - --- ----------------------------------------- -
------- -------
----- --
---
-- -----
----- ------ - --- ----------------
--------- -------
---- ---
---
-- ----------
------------------------------ -------- ----- -- -
----------------- - --------------------- - ------ - -----------------------
---
-
-
结语
ng-qqmap 是 Angular 中使用腾讯地图的常用方式。本文介绍了 ng-qqmap 的安装、引入以及如何使用它提供的基础功能。
希望本文内容对大家有所帮助，同时也希望大家加强对 ng-qqmap 的学习，并将其应用到实际项目中，提升自己在前端开发中的技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d981e8991b448e03b1