【vue引入腾讯地图、多边形绘制、标记点提示、绘制热力图】

已于 2024-03-27 11:10:16 修改
阅读量578 收藏 1
点赞数 3
文章标签： vue
于 2024-03-27 11:08:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsx1799268625/article/details/137070887
版权

在Vue项目中使用腾讯地图

实现结果

在这里插入图片描述

1、引入script

在public目录下，找到index.html文件，引入外部js文件,key为自己申请的腾讯地图地址

<script src="https://map.qq.com/api/gljs?v=1.exp&key=Y2ABZ-URA6Z-XDLXO-7AAIO-xxxxx-xxxxx&libraries=visualization"></script>

2、页面代码

2.1 这个div用来存放地图

<div ref="Container" style="width:1000px;height:600px;"/>

2.2 初始化地图

 mounted() {
      this.initMap()
    },

initMap() {
        //地图中心点坐标
        var center = [39.909897147274364, 116.39756310116866]
        // 定义map变量，调用 TMap.Map() 构造函数创建地图
        var map=  new window.TMap.Map(this.$refs.Container, {
          center: new window.TMap.LatLng(center[0],center[1]), // 设置地图中心点坐标
          zoom: 17.2, // 设置地图缩放级别
          minZoom:8,  //此处设置地图的最大最小缩放级别
          maxZoom:17.2,
          pitch:0, // 设置俯仰角
          rotation: 45, // 设置地图旋转角度
          showSatellite:true,
          showControl:true,
        })

2.3 绘制多边形

    //地图上要显示的各个点坐标（拐点）
        var pathStr = ['39.90189, 116.39156','39.90290, 116.39857','39.90392, 116.40360','39.90496, 116.39465']
        var paths = []
        for(var i=0; i<pathStr.length; i++){
          paths.push(new window.TMap.LatLng(pathStr[i].split(",")[0], pathStr[i].split(",")[1]))
        }

        //绘制图层多边形(轮廓）
        var polygon =  new window.TMap.MultiPolygon({
          id: 'polygon-layer', // 图层id
          map:map, // 显示多边形图层的底图
          styles: {
            // 多边形的相关样式
            polygon: new window.TMap.PolygonStyle({
              color: 'rgba(0,125,255,0.4)', // 面填充色
              showBorder: true, // 是否显示拔起面的边线
              borderColor: '#00FFFF', // 边线颜色
            }),
          },
          geometries: [
            {
              id: 'polygon', // 多边形图形数据的标志信息
              styleId: 'polygon', // 样式id
              paths: paths, // 多边形的位置信息
              properties: {
                // 多边形的属性数据
                title: 'polygon',
              },
            },
          ],
        });

2.4 添加标志性建筑

        var geometries = []
        paths.forEach(item => {
          geometries.push({
            "id": item[0],
            "styleId": item[0],
            "position": item,
            "properties": {
              "title": item[0]
            }
          })
        })
        var marker = new window.TMap.MultiMarker({
          //指定容器为上面的地图
          map: map,
          styles: {
            // 点标记样式
            marker: new window.TMap.MarkerStyle({
              width: 20, // 样式宽
              height: 30, // 样式高
              url: '../assets/icon/map-marker.png',  //图片路径
              anchor: { x: 10, y: 30 }, // 描点位置
            }),
          },
          //点标记数据数据
          geometries: geometries
        });

2.5 鼠标移动到建筑上显示 提示内容

        var infoWindow = new window.TMap.InfoWindow({
          //同上，容器
          map: map,
          position: new window.TMap.LatLng(center[0], center[1]),
          offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
        });
        infoWindow.close();//初始关闭信息窗关闭
        marker.on("mouseover", function (evt) {
          //设置infoWindow
          infoWindow.open(); //打开信息窗
          infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
          infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容
        })

2.6 绘制热力图

        let heatData = [{"lng":116.39857,"lat":39.90290,"count":100},{"lng":116.39156,"lat":39.90189,"count":211}] //热力数据
        let heatMap = new window.TMap.visualization.Heat({
          max: 250, // 热力最强阈值
          min: 0, // 热力最弱阈值
          height: 0, // 峰值高度
          gradientColor: { // 渐变颜色
            0.6: "#673198",
            0.8: "#e53390",
            0.9: "#ffc95a",
          },
          radius: 30 // 最大辐射半径

        }).addTo(map);
        heatMap.setData(heatData);//设置数据

3 完整代码

<template>
    <div ref="Container" style="width:1000px;height:600px;"/>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    mounted() {
      this.initMap()
    },
    methods: {
      // 地图初始化函数
      initMap() {
        //地图中心点坐标
        var center = [39.909897147274364, 116.39756310116866]
        // 定义map变量，调用 TMap.Map() 构造函数创建地图
        var map=  new window.TMap.Map(this.$refs.Container, {
          center: new window.TMap.LatLng(center[0],center[1]), // 设置地图中心点坐标
          zoom: 17.2, // 设置地图缩放级别
          minZoom:8,  //此处设置地图的最大最小缩放级别
          maxZoom:17.2,
          pitch:0, // 设置俯仰角
          rotation: 45, // 设置地图旋转角度
          showSatellite:true,
          showControl:true,
        })
        //地图上要显示的各个点坐标（拐点）
        var pathStr = ['39.90189, 116.39156','39.90290, 116.39857','39.90392, 116.40360','39.90496, 116.39465']
        var paths = []
        for(var i=0; i<pathStr.length; i++){
          paths.push(new window.TMap.LatLng(pathStr[i].split(",")[0], pathStr[i].split(",")[1]))
        }

        //绘制图层多边形(轮廓）
        var polygon =  new window.TMap.MultiPolygon({
          id: 'polygon-layer', // 图层id
          map:map, // 显示多边形图层的底图
          styles: {
            // 多边形的相关样式
            polygon: new window.TMap.PolygonStyle({
              color: 'rgba(0,125,255,0.4)', // 面填充色
              showBorder: true, // 是否显示拔起面的边线
              borderColor: '#00FFFF', // 边线颜色
            }),
          },
          geometries: [
            {
              id: 'polygon', // 多边形图形数据的标志信息
              styleId: 'polygon', // 样式id
              paths: paths, // 多边形的位置信息
              properties: {
                // 多边形的属性数据
                title: 'polygon',
              },
            },
          ],
        });
        //给地图添加点坐标 （标志性建筑，这里坐标用的上面的拐点）
        var geometries = []
        paths.forEach(item => {
          geometries.push({
            "id": item[0],
            "styleId": item[0],
            "position": item,
            "properties": {
              "title": item[0]
            }
          })
        })
        var marker = new window.TMap.MultiMarker({
          //指定容器为上面的地图
          map: map,
          styles: {
            // 点标记样式
            marker: new window.TMap.MarkerStyle({
              width: 20, // 样式宽
              height: 30, // 样式高
              url: '../assets/icon/map-marker.png',  //图片路径
              anchor: { x: 10, y: 30 }, // 描点位置
            }),
          },
          //点标记数据数据
          geometries: geometries
        });
        //点击标记点弹出的数据
        var infoWindow = new window.TMap.InfoWindow({
          //同上，容器
          map: map,
          position: new window.TMap.LatLng(center[0], center[1]),
          offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
        });
        infoWindow.close();//初始关闭信息窗关闭
        marker.on("mouseover", function (evt) {
          //设置infoWindow
          infoWindow.open(); //打开信息窗
          infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
          infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容
        })

        //绘制热力图
        let heatData = [{"lng":116.39857,"lat":39.90290,"count":100},{"lng":116.39156,"lat":39.90189,"count":211}] //热力数据
        let heatMap = new window.TMap.visualization.Heat({
          max: 250, // 热力最强阈值
          min: 0, // 热力最弱阈值
          height: 0, // 峰值高度
          gradientColor: { // 渐变颜色
            0.6: "#673198",
            0.8: "#e53390",
            0.9: "#ffc95a",
          },
          radius: 30 // 最大辐射半径

        }).addTo(map);
        heatMap.setData(heatData);//设置数据
      },
    }
  }
</script>

新手小白，欢迎指正！

zsx1799268625
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 引入腾讯地图实现多边形绘制功能
Kamikorosu的博客
07-27 2758
vue 接入腾讯地图实现多边形绘制功能
vue调用腾讯地图绘制几何图形
Liheishuai的博客
02-19 574
vue调用腾讯地图绘制几何图形
腾讯地图绘画多边形和计算面积
Zhooson的博客
12-17 441
【代码】腾讯地图绘画多边形和计算面积。
vue 腾讯地图信息窗体InfoWindow添加onClick事件，及方法传参
最新发布
DDY_18273570119的博客
05-23 320
效果如下。
Vue引入JavaScript API GL 腾讯地图sdk，绘制地图多边形
qq_38946233的博客
09-29 2050
@TOCVue引入腾讯地图，绘制地图多边形 <template> <div class="tmap"> <div class="btn"> <button @click="getMapCenter">获取中心</button> <button @click="change2D">2D视图</button> <button @click="change3D">3D视图
vue项目中使用腾讯地图(1.地图显示)
z980498059的博客
07-11 2504
腾讯地图文档：https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic。1.2服务控制台 ——应用管理——我的应用——创建应用——主要需要用到key。2.在index.html文件中引入腾讯地图。在页面中定义地图显示容器。//设置地图中心点坐标。2.1 创建地图组件。//设置地图缩放级别。
vue项目中使用腾讯地图(2.个性化手绘地图)
z980498059的博客
07-11 900
这边可以创建个性化图层，根据步骤插入图片，提交审核会需要时间 具体可参考控制台个性化地图beta版下的使用指南。/*在JSAPI GL中，个性化图层将以栅格图层的形式叠加在地图上进行展示。//开始引入实例化的地图，参考文章VUE项目中使用腾讯地图文章1。1.用到的腾讯地图控制台的个性化地图——个性化图层beta版。传入个性化图层ID，即可创建栅格图层实例 *///控制台创建个性化地图审核通过的id。// 创建失败，请查看控制台错误信息。// 成功创建个性化图层。
vue2用高德地图实现绘制多边形电子围栏
09-05
vue2用高德地图实现绘制多边形电子围栏
vue 高德地图 绘制工具的封装实现绘制 矩形 、圆形、多边形、点标记、折线 覆盖物 并编辑
05-07
1：实现对圆形、多边形、点标记、折线 等的绘制； 2：支持单个绘制 或者 多个绘制的选择； 3：支持对绘制后的图形进行删除； 4：支持对绘制后的图形进行编辑，调整； 5：支持根据图形数据显示到地图上，进行后续操作...
在vue中高德地图引入和轨迹的绘制的实现
01-21
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from...
百度地图绘制多边形几何图形并保存坐标转成覆盖物
04-12
本话题聚焦于如何使用百度地图API来绘制多边形几何图形，并将这些图形的坐标保存，以便后续转化为地图上的覆盖物。下面将详细阐述这一过程。 首先，我们要了解百度地图API的核心功能。百度地图API提供了丰富的地图...
腾讯地图、微信小程序、轨迹、路线图、marker标记点
05-27
本项目涉及的是利用腾讯地图服务在微信小程序中实现轨迹和路线图的展示，以及使用marker标记点来突出特定位置。以下是相关知识点的详细说明： 1. **腾讯地图API**：腾讯地图提供了一系列的JavaScript API，可以用于...
vue 腾讯地图绘画电子围栏 增删改
Chenqy1027的博客
05-10 1144
下面是index.heml里面需要先引入腾讯地图api。在vue里面的使用方法。
vue接入腾讯地图
qq_30110433的博客
12-13 1537
没有使用vue的组件，以下的代码是根据腾讯地图开放平台的实例进行编写。
uniapp+腾讯地图实现地图标记点位以及画多边形
博客简介
03-27 2386
【代码】uniapp+腾讯地图实现地图画多边形和点位回显（仅数据回显）非自定义画区和打点
腾讯地图绘制多边形
化名三爷
03-05 3596
可以随着地图级别放大而详情，单击显示详情，再次单击取消显示详情 这是那效果图： 直接上手代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l..
vue 腾讯地图插入多个自定义图标和文本标注
真真的博客
08-30 3930
在methods中加入： setMap() { let that = this this.$post('XXXXXXXX', { pageSize: -1, ...this.queryParams, }).then((r) => { let data = r.data ...
使用vue-amap实现多边形绘制和编辑
weixin_42367288的博客
11-03 3434
<template> <div class="content"> <div class="amap-wrapper"> <!-- <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" ></el-amap-sear
vue autocomplete_vue接入腾讯地图
weixin_39905226的博客
10-22 449
vue接入腾讯地图 最近在使用vue接入腾讯地图也是饱受折磨，因为本身对vue就不是很会，借此机会能好好学学vue。里面代码可能有的地方会有不妥之处，后面会改进的一、接入腾讯地图首先在马上开始接入 - 入门指南 | 腾讯位置服务​lbs.qq.com，这里面申请一个key效果图如下1、在vue里面的index.html中引用地图<2、在vue页面中写如下代码里面代码包含了，当前定位信息...
vue中高德地图绘制多边形并编辑
04-26
好的，您提到的问题是关于在 Vue 中绘制多边形并进行编辑的问题，对吗？那么，您可以使用高德地图 JavaScript API 中提供的绘制工具类来实现这一功能。具体步骤如下： 1. 引入高德地图 JavaScript API 和绘制工具类库： ```javascript <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> <script src="https://webapi.amap.com/ui/1.0/main.js"></script> ``` 2. 在 Vue 组件中创建地图容器，生成地图实例，并加载绘制工具类库： ```javascript <template> <div id="mapContainer"></div> </template> <script> export default { name: 'Map', mounted() { this.initMap(); }, methods: { initMap() { const map = new AMap.Map('mapContainer', { zoom: 10, center: [116.397428, 39.90923], }); AMap.plugin(['AMap.MouseTool'], () => { // 初始化鼠标绘制工具 const mouseTool = new AMap.MouseTool(map); // 监听draw事件，获取绘制的图形对象 AMap.event.addListener(mouseTool, 'draw', (e) => { console.log(e.obj); // e.obj为绘制出来的图形对象 // TODO: 将图形对象保存到state中，用于后续编辑 }); }); }, }, }; </script> ``` 3. 在绘制完成后，将绘制的图形对象保存到 state 中，以便进行后续编辑： ```javascript // 将绘制的图形对象保存到state中 // state.polygons为一个数组，保存所有已绘制的多边形对象 state.polygons.push(e.obj); ``` 4. 对已绘制的多边形对象进行编辑： ```javascript // 对已绘制的多边形对象进行编辑 const drawPolygon = (polygon) => { // 使用多边形编辑插件 const polygonEditor = new AMap.PolyEditor(map, polygon); // 开启编辑模式 polygonEditor.open(); // 监听编辑完成事件，保存编辑后的多边形对象到state中 AMap.event.addListener(polygonEditor, 'end', (e) => { console.log(e.target); // e.target为当前编辑的多边形对象 // TODO: 保存编辑后的多边形对象到state中 }); }; ``` 希望这个回答能够帮助您解决问题。如果您还有其他问题，可以继续向我提出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值