vue 使用腾讯地图 标点 自定义瓦片 折线配置

于 2024-07-12 10:05:03 发布
阅读量668 收藏 5
点赞数 5
文章标签： vue.js swift 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45563734/article/details/140358873
版权

vue 使用腾讯地图 标点 自定义瓦片 折线配置

  1. 申请腾讯地图秘钥 key
    腾讯地图开发者 https://lbs.qq.com/dev/console/application/mine
    腾讯地图开发文档 https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview
    在这里插入图片描述

  2. 添加 key
    在这里插入图片描述
    在这里插入图片描述

  3. 代码中引入

// 入口文件 index.html
// 填入你申请的key
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=这里是你申请的key"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  1. 初始化
    在这里插入图片描述
    // 这是切好的瓦片图 文件夹名字为 z 文件名字为 x_y

在这里插入图片描述
在这里插入图片描述

<template>
  <div id="mapContainer"></div>
</template>

data(){
  return {
     mapObj:null,
     mapMarker:null
  }
},
mounted(){
  this.$nextTick(()=>{
   initMap()
  })
},
 methods:{
     initMap() {
        var center = new TMap.LatLng(26.870355, 110.239704) //设置中心点坐标
        // 初始化地图
        this.mapObj = new TMap.Map("mapContainer", {
        center: center,
        zoom: 12, // 地图默认缩放级别
        showControl: true,  // 是否显示地图上的控件
        // viewMode: '2D',  // 地图视图模式，支持2D和3D，默认为3D。2D模式下俯仰角和旋转角度始终为0
        rotation: 0, //设置地图旋转角度
      });
      // 初始化瓦片

      // 瓦片图需要切好每个位置的图
      // x,y,z 为上图的坐标
      
      new TMap.ImageTileLayer({
        getTileUrl: function (x, y, z) {
          console.log(x,y,z)
          //拼接瓦片URL
          let url =
            `https://xxxxxxxxx.com/${cutUrl}/` +
            z +
            "/" +
            x +
            "_" +
            y +
            ".png";
          return url;
        },
        tileSize: 256, //瓦片像素尺寸
        minZoom: Number(baseData.mapMinRatio), //显示自定义瓦片的最小级别
        maxZoom: Number(baseData.mapMaxRatio), //显示自定义瓦片的最大级别
        visible: true, //是否可见
        zIndex: 5000, //层级高度（z轴）
        opacity: 1, //图层透明度：1不透明，0为全透明
        map: this.mapObj, //设置图层显示到哪个地图实例中
      });
      
      //当图中打点非常密集，地图的可读性变差时，推荐使用点聚合功能，它会根据您的设置，自动将距离相近的标记聚合到一起，以统计数字方式呈现在图中相应位置，从而实现清晰、易读的场景需求。
       this.markerCluster = new TMap.MarkerCluster({
        id: "cluster",
        map: this.mapObj,
        enableDefaultStyle: false, // 关闭默认样式
        minimumClusterSize: 2,
        geometries: [
         // 这个数据可以写死  也可以调用方法 动态添加
             {position: new TMap.LatLng(39.982829,116.306934)},
	         {position: new TMap.LatLng(39.989011,116.323586)},
	         {position: new TMap.LatLng(39.978751,116.313286)},
	         {position: new TMap.LatLng(39.980593,116.304359)},
        ],
        zoomOnClick: true,
        gridSize: 60,
        averageCenter: true,
      });
     // 或者使用该方法  添加数据
    // this.markerCluster.setGeometries([]);

    // 折现初始化
    // 此处变量为动态配置的颜色  你也可以写死
      let lineColor = this.baseData.lineColor;
      let lineThickness = this.baseData.lineThickness;
      let lineOuterColor = this.baseData.lineOuterColor;
      let lineOuterThickness = this.baseData.lineOuterThickness;
      this.polyline = new TMap.MultiPolyline({
        id: "polyline-layer",
        map: this.mapObj,
        styles: {
          polyline: new TMap.PolylineStyle({
            color: lineColor, //线填充色
            width: lineThickness, //折线宽度
            borderWidth: lineOuterThickness, //边线宽度
            borderColor: lineOuterColor, //边线颜色
            lineCap: "round", //线端头方式
            showArrow: true,
            ArrowOptions: {
              space: 5,
            },
          }),
        },
        geometries: [
             // 这个数据可以写死  也可以调用方法 动态添加
	        // 此处为点数据 同上面一样
	     ],
      });
	    // 或者使用该方法  添加数据
	    // this.polyline.setGeometries([]);
     

       // 标记点文本
       this.labelMarker = new TMap.MultiLabel({
        id: "label-layer",
        map: this.mapObj,
        zIndex: 7000,
        styles: {
          label: new TMap.LabelStyle({
            alignment: "center", //文字水平对齐属性
            verticalAlignment: "middle", //文字垂直对齐属性
            color: "#fff",
            size: 18,
            offset: { x: 0, y: 20 },
            backgroundColor: "rgba(86, 76, 84, 0.80)",
            // strokeWidth: 2,
            borderRadius: 25,
            padding: "4px 20px",
          }),
          labelN: new TMap.LabelStyle({
            alignment: "center", //文字水平对齐属性
            verticalAlignment: "middle", //文字垂直对齐属性
            color: "#fff",
            size: 12,
            offset: { x: 0, y: 15 },
            backgroundColor: "rgba(86, 76, 84, 0.80)",
            // strokeWidth: 2,
            // width :140,
            // height: 20,
            padding: "2px 12px",
            borderRadius: 25,
          }),
          labelEn: new TMap.LabelStyle({
            alignment: "center", //文字水平对齐属性
            verticalAlignment: "middle", //文字垂直对齐属性
            color: "#333",
            size: 12,
            offset: { x: 0, y: 15 },
            backgroundColor: "rgba(254,250,245,0.85)",
            // strokeWidth: 2,
            width: 180,
            height: 20,
            borderRadius: 25,
          }),
        },
        enableCollision: false,
        geometries: [
             // 这个数据可以写死  也可以调用方法 动态添加
	        // 此处为点数据 同上面一样
	     ],
      });


       // 标记点 标记点点击事件
       this.mapMarker = new TMap.MultiMarker({
        map: this.mapObj, // 显示Marker图层的底图
        zIndex: 6000,
        styles: {
          small_1: new TMap.MarkerStyle({
            // 点标注的相关样式
            width: 32, // 宽度
            height: 36, // 高度
            anchor: { x: 16, y: 36 }, // 标注点图片的锚点位置
            src: "./images/smartMap/spot.png", // 标注点图片url或base64地址
          }),
          big_1: new TMap.MarkerStyle({
            width: 40,
            height: 48,
            anchor: { x: 20, y: 48 },
            src: "./images/smartMap/spot.png",
          }),
          user: new TMap.MarkerStyle({
            width: 36,
            height: 44,
            anchor: { x: 18, y: 44 },
            src: "https://eshopfile.xxxxx.com/2023031609350436976.png",
          }),
        },
        enableCollision: false, // 开启碰撞
        geometries: [
             // 这个数据可以写死  也可以调用方法 动态添加
	        // 此处为点数据 同上面一样
	     ],
      });
      
	    // 标记点点击事件
	    this.mapMarker.on("click", this.markerClick);

	    // 点击事件
		this.mapObj.on("click", this.mapClick);
     },
      mapClick(val) {
       // 点击事件返回经纬度 等各种信息
      console.log(val)
    },
    markerClick(res){
     console.log(res)
    }
 }

  1. 效果图
    在这里插入图片描述

  2. 项目中的图片 请更换为您自己的图片。

  3. 该博客 包含 地图的初始化 折线 瓦片图 标记点 标记点文本 等实现信息。 希望可以帮助您！

你的眼睛會笑
关注
自定义地图底图（瓦片）Demo
04-15
实现在地图中指定区域显示自定义图片，并支持指定层级放大缩小， 点击链接预览效果 https://pi-ip.oss-cn-hangzhou.aliyuncs.com/map/map.html
Vue2-腾讯地图--地图标记
前端叶荨，随手记
04-17 863
带有显示多个标记与图文标记。腾讯地图--地图展示。
vue项目中使用腾讯地图(3.地图标点信息+图标)
z980498059的博客
07-11 1203
c.marker点标记数据数组（geometries）：数组每一项为一个点标记，点标记数据包括该点坐标、样式id以及自定义的数据属性。参考文档：https://lbs.qq.com/webApi/javascriptGL/glGuide/glMarker。a.地图容器设置（map）：地图API支持在同一页面创建多个地图实例，该参数用来指定点标记显示在哪张地图上。b.marker样式设置（styles）：可定义多个样式，每个样式有一个样式id。地图标点主要用到了点标记MultiMarker。
vue - vue使用腾讯api进行定位获取，绘制地图、标点、搜索、路线规划
qq_43886365的博客
03-10 1万+
vue使用腾讯地图api进行定位获取，绘制地图、标点、搜索、路线规划
【vue引入腾讯地图、多边形绘制、标记点提示、绘制热力图】
zsx1799268625的博客
03-27 788
vue引入腾讯地图，实现区域框选、建筑提示、热力图
vue3框架腾讯地图v1版项目-MultiMarker点标记自定义样式和图片的写法
最新发布
qq_41421033的博客
06-06 1013
腾讯地图v1版 MultiMarker点标记功能中的样式应用, 更换点标记的图片等方法
如何在vue中使用百度地图添加自定义覆盖物（水波纹）
01-22
具体的应用场景简而言之就是需要我们在地图上添加如图中所示的自定义覆盖物。实现的过程作者分为以下两点给大家介绍介绍。 水波紋的实现 自定义覆盖物的实现 水波紋的实现 这个需求的实现肯定是离不开我们自己写...
在vue中使用天地图dome
05-31
7. **地图换颜色**：改变地图的颜色主题，可以通过切换不同的图层样式或使用自定义样式来实现。这可能涉及到对天地图图层类别的理解和配置。 8. **区域图**：在地图上展示特定区域的边界，通常需要加载边界数据（如...
java+vue使用百度地图用代理方式访问瓦片
11-06
百度离线瓦片 放入tomcat或者nginx中代理使用离线瓦片地图 在index.htm中引入 <script type="text/javascript" src="static/baidumapv2/baidumap_offline_v2_load.js"></script> 具体目录图片格式自己可以在 load...
使用Vue-Grid-Layout实现自定义工作台
02-01
在本教程中，我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作台。 首先，我们需要安装 Vue-Grid-Layout 和其依赖 Vue.js。如果你还没有设置 Vue 项目，可以使用 Vue CLI 创建一个新的项目。在已有的项目中...
vue 使用腾讯地图并在图中标点标注
Red_sevenWord的博客
05-30 3706
vue 使用腾讯地图 根据官方文档中使用script来引入，首先要去注册一个地图的key 指路：腾讯地图官方注册地址 找到项目中的index.html通过script的方式引入 <script src="https://map.qq.com/api/gljs?v=1.exp&key=你刚刚申请的key"></script> 现在去到我要生成地图的页面 <template> <div class="txMap"> <div id="
vue使用腾讯地图，实现点标记，搜索
曳猫的博客
10-17 915
1、public文件夹下index.html添加。
vue接入腾讯地图(二)【标注&定位实战】
腾讯位置服务
09-11 1495
vue接入腾讯地图(一)【点击事件】请参考：https://juejin.im/post/6868479028777484301 1、【标注】 添加标注 var marker = new qq.maps.Marker({ position: myLatlng , map: map }); 文本标注 var marker = new qq.maps.Label({ position: myLatlng, map: map, content:'文本标注' }); 效果
地图中构建折线-MultiPolyline
DTCloud
03-24 301
最终效果展示 2. 初始化地图 3. 创建 MultiPolyline a. 显示箭头的路线 b. 显示虚线的路线 4. 创建开头结束的图标 5. 初始化路线图 6. 完整实例代码 参考链接
记录在Vue项目里面使用腾讯地图
热门推荐
m0_60835161的博客
03-29 1万+
Vue使用腾讯地图
【微信公众号H5】腾讯地图的导入、定位、自定义标点与信息窗体
qq_56699753的博客
03-26 3055
模仿南京体彩网点地图功能做一个demo自定义标点主要是定义图标的图像以及大小、图片地址等参数。效果代码本地图创建了多个地图标点// 创建多个标点let wangDian1 = [] // 生成图标实例1let wangDian2 = [] // 生成图标实例2let wangDian3 = [] // 生成图标实例3let wangDian4 = [] // 生成图标实例4let wangDian5 = [] // 生成图标实例5此处为后台模拟数据，仅供参考// 模拟数据。
Vue中使用腾讯地图获取精确定位，换取adCode
zzzzzzzi111的博客
08-18 958
Vue中使用腾讯地图获取精确定位，换取adCode
vue3使用腾讯地图（关键词搜索，地址获取经纬度，标记位置）
weixin_52164116的博客
10-27 3214
vue3使用腾讯地图（关键词搜索，地址获取经纬度，标记位置）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值