高德地图：标点-连线-自定义图标-文字提示的使用

目录

下面是使用高德地图进行标点连线的使用：

1.定义一个装载地图的容器，并定义进行标点和连线的数据

 2.在组件的mounted钩子函数中初始化地图，给地图添加点击事件监听器。

3.使用高德地图的Polyline类来绘制连接线。

这是上面代码的效果：

4.使用自定义图标

5. 设置点标注的文本标签及提示

这是使用了自定义图标及文字提示的效果：

---

下面是使用高德地图进行标点连线的使用：

1.定义一个装载地图的容器，并定义进行标点和连线的数据

<template>  
    <div class="mapContent" id="mapId"></div>
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      map: null,  
      markers: [], // 存储标记的经纬度  
      polyline: null, // 线条对象  
    };  
  },
//....
<style scoped>  
.mapContent {  
  width: 100%;  
  height: 400px;  
}  
</style>

 2.在组件的mounted钩子函数中初始化地图，给地图添加点击事件监听器。

当点击地图时，获取点击的经纬度，并在该位置添加一个标记（Marker），每次点击地图时，将标记的经纬度存储在一个数组中（markers）。

 mounted() {  
    this.initMap();  
  },  
  methods: {  
    initMap() {  
      // 初始化地图  
      this.map = new AMap.Map("mapId", {
        resizeEnable: true,  
        zoom: 14,
        center: [ this.longitude,this.latitude],
      });
  
      // 添加点击事件监听器  
      this.map.on('click', (e) => {  
        // 添加标记  
        const marker = new AMap.Marker({  
          position: e.lnglat,  
          map: this.map,  
        });  
  
        // 存储标记的经纬度  
        this.markers.push(e.lnglat);  
  
        // 绘制连接线  
        this.drawPolyline();  
      });  
    },  

 其中