前言

本文主要记录一下在Vue项目里面使用腾讯地图实现的一些功能。如：异步引入腾讯地图SDK、腾讯地图marker的使用、在地图上画线计算距离并回显、在地图上画不规则闭合图形计算面积。

一、异步引入SDK

1.封装初始化方法。

export default {init: function (){const AK = "你的key";const TMap_URL = "https://map.qq.com/api/gljs?v=1.exp&libraries=tools,service&key="+ AK +"&callback=onMapCallback";return new Promise((resolve, reject) => {// 如果已加载直接返回if(typeof TMap !== "undefined") {resolve(TMap);return true;}// 地图异步加载回调处理window.onMapCallback = function () {resolve(TMap);};// 插入script脚本let scriptNode = document.createElement("script");scriptNode.setAttribute("type", "text/javascript");scriptNode.setAttribute("src", TMap_URL);document.body.appendChild(scriptNode);});}}

这里要注意的是，我们会使用腾讯地图的线、面绘制和测量，需要使用额外的tools和service类。如果不涉及这些功能，可以不额外引入libraries。参考文档JavaScript API | 腾讯位置服务 (qq.com)

2.引入并使用。

// 引入加载TXMap的方法
import TMap from "@/utils/initMap";
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {TMap.init().then((TMap) => {this.TXMap = TMap;this.tMap = new TMap.Map("map", {center: new TMap.LatLng(centerPoint.latitude, centerPoint.longitude), //设置地图中心点坐标zoom: 15, //设置地图缩放级别viewMode: "2D",});});},

二、腾讯地图marker使用

1.效果预览

2.代码实现

获取要标记在地图上marker的经纬度集合，将获取到的点位集合处理为地图可以识别的点。然后使用TXMap.MultiMarker()把点位渲染到地图上。


<script>
export default {data() {return {tMap: null, // 腾讯地图实例TXMap: null, // 腾讯地图原型markersData: [], // 标记数据infoWin: null, // 信息窗口实例};},methods: {// 获取标记数据集合 根据项目自行实现。getMarkersData() {//....},// 将坐标点处理为地图可以识别的坐标hanleMarker() {let myMarkers = [];this.markersData.map((item, index) => {let obj = {id: item.id,styleId: "marker" + item.category,position: new this.TXMap.LatLng(item.lat * 1, item.lon * 1),properties: {title: `${item.categoryName}[${item.number}]`,status: item.status,},};myMarkers.push(obj);});return myMarkers;},// 渲染markerrenderMarker() {let markerArr = this.hanleMarker();let map = this.tMap;this.marker = new this.TXMap.MultiMarker({id: "marker-layer",map: map,styles: this.setMarkImg(),geometries: markerArr,});//给标识添加点击事件this.marker.on("click", (event) => {let { lat, lng } = event.latLng;let { title, status } = event.geometry.properties;this.initWindow(lat, lng, title, status);this.infoWin.open();});},// 看上面的动图发现 2个marker图标不一样，这里代码就是实现此功能setMarkImg() {let styleOption = {};// 遍历图标集合this.typeOptions.map((item) => {styleOption["marker" + item.id] = new this.TXMap.MarkerStyle({cursor: "pointer",width: 25,height: 25,anchor: { x: 16, y: 32 },src: item.active_icon,});});return styleOption;},// 初始化一个信息窗口initWindow(lat, lng, title, status) {// 一次只能打开一个窗口 打开之前先关闭之前打开的if (this.infoWin) {this.closeWindow();}this.infoWin = new this.TXMap.InfoWindow({map: this.tMap,position: new this.TXMap.LatLng(lat, lng),// enableCustom: true,content: `<ul class="equipment"><li>设施：<span>${title}</span></li><li>状态：<span class="${status == 1 ? "good" : "bad"}">${status == 1 ? "正常" : "损坏"}</span></li></ul>`,offset: { x: 0, y: -30 }, //设置信息窗相对position偏移像素});// 信息窗口关闭回调this.infoWin.on("closeclick", () => {// ...});},// 关闭信息窗口closeWindow() {if (this.infoWin) {this.infoWin.close();}},},
};
</script>

三、在地图上画线并测量距离

1.效果预览

2.代码实现

要实现这个功能并不难，腾讯地图已经实现了这个功能，只需要引入对应的tools工具类，再加上自己的业务代码即可，直接上代码。

<script>
export default{data(){tMap: null, // 地图实例TXMap: null, // 地图原型miniMap: null, // 表单里面的地图mapLine: null, //表单地图折线实例measure: null, // 测量工具实例 },methods:{// 添加路线功能是放在弹窗里面的，所以在打开弹窗时初始化一下弹窗里面的地图实例，如果已经存在，则先销毁。//显示表单弹出层showPop() {this.dialogVisible = true;this.$nextTick(() => {// 判断是否存在表单地图实例 已存在先销毁 避免重复创建if (this.miniMap) {this.miniMap.destroy();}TMap.init().then((TMap) => {this.TXMap = TMap;//初始化地图折线实例this.miniMap = new TMap.Map("miniMap", {center: new TMap.LatLng(centerPoint.latitude,centerPoint.longitude), //地图显示中心点zoom: 15, //设置地图缩放级别viewMode: "2D",});this.mapLine = new TMap.MultiPolyline({map: that.miniMap,});// 弹出层打开且非编辑状态 直接进入画线模式if (!this.addForm.id) {// 初始化绘制线路this.initPaint();}});});},// 初始化画线模式initPaint() {this.measure = null;this.measure = new this.TXMap.tools.MeasureTool({map: this.miniMap,});this.measure.measureDistance().then((res) => {//绘制线路完成的回调 可以获取路径数据集合和路径长度document.querySelector(".tip-close").style.display = "none";this.addForm.points = res.path;this.addForm.length = res.totalDistance;}).catch((err) => {console.log(err);});},// 清空路线clear() {//判断当前地图是否已经绘制了路径if (this.addForm.points.length > 0) {if (this.measure) {//腾讯地图没有提供清除路线的api，通过查看原型发现的方法可以清除已经绘制的路线this.measure._removeFromMap();this.measure = null;}if (this.addForm.id) {this.mapLine.setMap(null);}this.addForm.points = [];this.addForm.length = 0;this.initPaint();} else {this.$message({type: "error",message: "没有需要清除的路线",});}},},mounted(){// 初始化地图实例TMap.init().then((TMap) => {this.TXMap = TMap;this.tMap = new TMap.Map("map", {center: new TMap.LatLng(centerPoint.latitude, centerPoint.longitude), //地图显示中心点zoom: 16, //设置地图缩放级别viewMode: "2D",});}); }}
</script>

在地图上绘制图形并计算面积和绘制路线同理，只是调用的方法不一样，可自行实现。如有错误，欢迎指正。

记录在Vue项目里面使用腾讯地图相关推荐

html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
vue PC 端使用腾讯地图定位
vue PC 端使用腾讯地图定位需求:希望网站显示当前城市腾讯前端定位组件解决的方法定义一个文件,加载定位js 在vue页面中使用需求:希望网站显示当前城市腾讯前端定位组件 key的申请, ...
【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
angular项目(TS)引入腾讯地图报找不到qq
文章目录在angular项目中引入腾讯地图问题解决结尾在angular项目中引入腾讯地图在index.html文件中script标签加载API服务 <script charset=&q ...
vue项目打包到腾讯云服务器全过程
本文将记录vue项目打包放到服务器的整个过程,本文中的例子是express+vue,希望能给遇到这方面问题的同学一个解决办法. 登录服务器假定已经拥有一个服务器账号,然后下载一个xftp5用来作文件 ...
如何在Vue项目中引入腾讯验证码服务
什么是腾讯验证码?它长这个样子--? 最近公司项目要求引入腾讯云验证,要求是这样的:为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ...
记录一个vue项目报错UnhandledPromiseRejectionWarning: Unhandled promise rejection.
使用vue-cli创建vue项目,加入一些之前的代码,然后打包运行报错: (node:4892) UnhandledPromiseRejectionWarning: Unhandled promise ...
记录一次vue项目引入GoogleMap API进行地图定位
背景公司项目进行国际化处理,需要将定位信息地图替换成谷歌地图. 一.Google 账号准备用谷歌账户登录谷歌云平台 https://cloud.google.com/maps-platform/? ...
vue中加载腾讯地图（html形式）
vue中引入腾讯地图,目前根据网上的方式有一种 qqmap组件,但是本人才疏学浅,未能探究如何使用,于是乎,就曲线救国,用另一种方式实现了,在vue中引入iframe,然后在iframe中引入html ...

记录在Vue项目里面使用腾讯地图

前言

一、异步引入SDK

1.封装初始化方法。

2.引入并使用。

二、腾讯地图marker使用

1.效果预览

2.代码实现

三、在地图上画线并测量距离

1.效果预览

2.代码实现

记录在Vue项目里面使用腾讯地图相关推荐

最新文章

热门文章