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

じòぴé南冸じょうげん

已于 2024-05-13 15:53:54 修改

阅读量921

点赞数 26

分类专栏：高德地图文章标签： css javascript 前端

于 2024-05-13 15:52:37 首次发布

本文链接：https://blog.csdn.net/qq_71214810/article/details/138802130

版权

高德地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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();  
      });  
    },

其中 e.lnglat的输出为下面这个，其实就是经纬度:

下面是官方文档的说明：

经纬度坐标，用来描述地图上的一个点位置, 目前高德地图使用的是 GCJ-02 坐标，如果你采集的是 WGS84 坐标，请先进行坐标转换.

构造一个地理坐标对象:

//构造一个地理坐标对象
new AMap.LngLat(lng: Number?, lat: Number?, noWrap: Boolean?)

//参数说明：lng (Number?) 经度值 ；lat (Number?) 纬度值 
//noWrap (Boolean?) 是否自动将经度值修正到 [-180,180] 区间内，缺省时为false。
//noWrap 为false时传入 [190,30] ，会被自动修正为 [-170,30] , noWrap 为true时不会自动修正，
//可以用来进行跨日期限的覆盖物绘制

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

可以遍历存储的经纬度数组，并使用这些经纬度来绘制线条。注意，需要确保线条按照标记添加的顺序来绘制。

当添加新的标记时，你需要清除旧的线条并绘制一个新的线条。

下面是绘制线条的代码，以及部分使用属性是什么：

    drawPolyline() {  
      // 清除旧的线条（如果有）  
      if (this.polyline) {  
        this.map.remove(this.polyline);  
      }  
  
      // 使用存储的经纬度数组绘制新的线条  
      this.polyline = new AMap.Polyline({  
        path: this.markers,  
        isOutline: true,     //是否绘制线条的轮廓
        outlineColor: '#ffeeee',  //轮廓的颜色
        borderWeight: 2,   //轮廓的线条宽度
        strokeColor: '#3366FF',  //线条的主颜色
        strokeWeight: 5,    //线条的宽度
        lineJoin: 'round',  //定义线条段之间如何连接的样式
//round表示以圆角连接，bevel表示以斜角连接，miter表示以尖角连接。
        lineCap: 'round', //定义线条端点的样式
//round表示以圆角结束，butt表示以平头结束，square表示以方形结束。 
        zIndex: 50,  //线条的堆叠顺序。数值较大的线条将显示在数值较小的线条之上。
        map: this.map,  //线条应该被添加到哪个地图上。this.map是你已经初始化好的高德地图对象。
      });  
    },

这是上面代码的效果：

大部分都是默认的样子，标点默认为蓝色，我就是改了下线的颜色为粉色（就是喜欢粉色），

通过你点击的顺序进行连线，意思就是你像旅游一样，先去这再去那，有个先后。

4.使用自定义图标

在原来的点击事件中，通过new AMap.Icon来创建一个自定义图标,并在marker中使用。

我这个下面的是随便在网上找的一个蜡笔小新的动图，可能不好看

  // 添加点击事件监听器  
      this.map.on('click', (e) => {  
        console.log(e,'eee');
              // 自定义Marker图标  
      const markerIcon = new AMap.Icon({  
        image: 'https://ts1.cn.mm.bing.net/th/id/R-C.894192678c93158f2a4bf7f8a59cc0a3?rik=BDxJFQ5xVq3AqA&riu=http%3a%2f%2fimg.520touxiang.com%2fuploads%2fallimg%2f160527%2f3-16052G55601.gif&ehk=I7rXEktiDfSaYMyLV9%2flqjkKb4aiXfphHLxpTsstG34%3d&risl=&pid=ImgRaw&r=0', // 图标图片URL 
        size: new AMap.Size(100, 100),  //图标所处区域大小
	      imageSize: new AMap.Size(100,100), //图标大小
        imageOffset: new AMap.Pixel(-10, -32), // 图片相对于Marker定位点的偏移  
      });  

        // 添加标记  
        const marker = new AMap.Marker({  
          position: e.lnglat,  
          map: this.map,  
          icon: markerIcon, // 设置自定义图标  
          zIndex: 100, // 设置堆叠顺序  
        });  

;  

      });

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

在原来的基础上通过通过setTitle方法设置文字提示，再通过label属性给Marker设置文本标签

具体代码及解释如下：

        //...
 // 添加标记  
        const marker = new AMap.Marker({  
      //...
        });         

// 设置鼠标划过点标记显示的文字提示
        const {lat,lng}=e.lnglat
    marker.setTitle(`经纬度：[${lng},${lat}]`);

// 设置label标签
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
marker.setLabel({
    offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
    content: "<div class='info'>我是 marker 的 label 标签 <br/><span>我是蜡笔小新</span></div>", //设置文本标注内容
    direction: 'top' //设置文本标注方位，也可以设置其他方向
});