Angular4中基于AgmCoreModule为Google Maps折线添加首尾标记点

Hey there! 我来帮你搞定在Angular4的AGM地图里给折线加上起点和终点标记的问题～其实方法很简单，咱们直接利用你已经有的lines数组的首尾元素来创建标记就好，下面是具体实现步骤：

1. 修改你的HTML模板 #

你只需要在agm-map容器里，在折线代码的旁边添加两个agm-marker组件，分别绑定lines数组的第一个元素（起点）和最后一个元素（终点）的经纬度就行。这里我还给标记加了区分的标题和自定义配置，方便识别：

<div class="container">
  <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
    <!-- 折线部分 -->
    <agm-polyline [strokeColor]="color" [strokeWeight]="weight">
      <agm-polyline-point *ngFor="let test of lines" 
                          [latitude]="test.latitude" 
                          [longitude]="test.longitude">
      </agm-polyline-point>
    </agm-polyline>

    <!-- 起点标记 -->
    <agm-marker *ngIf="lines.length > 0"
                [latitude]="lines[0].latitude" 
                [longitude]="lines[0].longitude"
                [title]="'起点'"
                [iconUrl]="startMarkerIcon">
    </agm-marker>

    <!-- 终点标记 -->
    <agm-marker *ngIf="lines.length > 1"
                [latitude]="lines[lines.length - 1].latitude" 
                [longitude]="lines[lines.length - 1].longitude"
                [title]="'终点'"
                [iconUrl]="endMarkerIcon">
    </agm-marker>
  </agm-map>
</div>

2. 在组件类中添加可选的自定义配置 #

如果想给起点终点用不同的标记图标或者样式，可以在你的组件.ts文件里定义相关变量：

// 示例：自定义标记图标URL（你可以换成自己的图标地址）
startMarkerIcon = 'https://maps.gstatic.com/mapfiles/markers2/marker_greenA.png';
endMarkerIcon = 'https://maps.gstatic.com/mapfiles/markers2/marker_redA.png';

// 或者如果你想用默认标记的颜色，也可以用这个属性：
// startMarkerColor = '#00FF00';
// endMarkerColor = '#FF0000';

3. 额外的优化建议 #

• 加*ngIf判断是为了避免当lines数组为空或者只有一个点的时候出现报错，让代码更健壮；
• 如果你需要给标记添加点击事件或者信息弹窗，可以给agm-marker绑定(markerClick)事件，比如：

  <agm-marker ... (markerClick)="showMarkerInfo(lines[0])"></agm-marker>
  

  然后在组件类里实现showMarkerInfo方法即可。

这样一来，你的折线起点和终点就会显示对应的标记啦，是不是很简单😉

内容的提问来源于stack exchange，提问作者qfarawi55