腾讯地图 Javascript API 地图自定义标记、自定义标记文字（不显示标记图）

最新推荐文章于 2024-08-08 10:00:00 发布

li@h

最新推荐文章于 2024-08-08 10:00:00 发布

阅读量3.2k

点赞数 8

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_49066399/article/details/135409608

版权

本文介绍了如何在Vue项目中集成腾讯地图API，展示如何创建自定义图标标记和添加文本标签，通过经纬度数据展示了如何设置围墙面和标记特定位置。

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

引用方式请查看腾讯地图文档

自定义图标标记

vue代码

     <div style="padding: 10px; height: 600px; width: 100%">
          <div id="container" style="height: 100%"></div>
     </div>

mounted() {
this.initMap();
}
 initMap() {
//创建地图
var map = new TMap.Map("container", {
    center: new TMap.LatLng(40.0324251949936, 116.23647955854779)
});
//设置围墙面数据
var wallLint = [
    [40.071569, 116.066299],
    [40.059555, 116.068659],
    [40.051028, 116.067166],
    [40.038325, 116.072276],
    [40.037207, 116.077507],
    [40.031095, 116.087242],
    [40.029615, 116.093683],
    [40.031623, 116.103707],
    [40.028207, 116.121939],
];
var path = convertToPath(wallLint);
//围墙
this.wallMap(map,path)
 //标记位置
        this.positionMarker(map);
}

wallMap(map,path){
var wallData = {
      path: path, //经纬度点串
      height: 4500, //设置围墙面高度
      styleId: "style1", //设置围墙面样式配置id
};
//创建围墙面
var Wall = new TMap.visualization.Wall({
      styles: {
        style1: {
          color: new TMap.GradientColor({
            stops: {
              0: "rgba(1,124,247,0.6)",
              1: "rgba(29,250,242,1)",
            },//设置渐变色的颜色，此处为rgba()格式
            angle: 90, //设置渐变色的渐变方向，此处为90度
          }),
        },
      },
      processAnimation: {
        animationType: "breath", //设置动画类型，此处为呼吸
        breathAmplitude: 0.5, //设置呼吸幅度
        yoyo: true, //设置回弹效果
        duration: 1000, //设置动画时长
      },
   }).addTo(map);
  Wall.setData([wallData]);
},
  convertToPath(array) {
      return array.map((p) => {
        if (p.length == 2) return new TMap.LatLng(p[0], p[1]);
        if (p.length == 3) return new TMap.LatLng(p[0], p[1], p[2]);
      });
    },
    // 标记位置自定义图标
    positionMarker(map) {
     const marke= new TMap.MultiMarker({
        id: "marker-layer", //图层id
        map: map,
          styles: {
           marker: new TMap.MarkerStyle({
           width: 25,
            height: 25,
            anchor: { x: 16, y: 32 },
            src: require("@/assets/red.png"),//这里是静态图片的地址一定要加上require 不然渲染不出来
           })
      },
      geometries:[{
          id: "marker2",
          styleId: "marker",//这里的样式id和上面的styles中的marker键要一样
          position: new TMap.LatLng(40.031623, 116.103707),//标记点位置
       }]
     })
   },

//标记自定义文字不加标记图
    positionMarkerLable(map) {
     const marke= new TMap.MultiLabel({
        id: "marker-layer", //图层id
        map: map,
          styles: {
           marker: new TMap.LabelStyle({
            color: '#3777FF', //颜色属性
            size: 14, //文字大小属性
            offset: { x: 0, y: 0 }, //文字偏移属性单位为像素
            angle: 0, //文字旋转属性
            alignment: 'center', //文字水平对齐属性
            verticalAlignment: 'middle' //文字垂直对齐属性
           })
      },
      geometries:[{
        id: "marker2",
        styleId: "marker",//这里的样式id和上面的styles中的marker键要一样
        position: new TMap.LatLng(40.031623, 116.103707),//标记点位置
        content: '标记显示内容',//标记显示内容
        }]
      })
   },