后台基于elment-dialog展示打卡定位腾讯地图

点击list中的查看会弹出dialog展示定位

定位所需要的经度和纬度由后端接口提供，visitedList为展示list，通过$emit(‘showPosition’,{latitude:****,longitude:*****}传递list中从后端获取的经度纬度，并触发打开弹框

在这里插入代码片
<div><visitedList @showPosition="showPosition" /></div><el-dialog:visible.sync="positionDialog"title="打卡定位"width="640px"class="position-dialog"append-to-bodydestroy-on-close><div class="map"><div v-show="latitude !== 0 || longitude !== 0" id="has-map" class="has-map" /><div v-show="latitude === 0 && longitude === 0" class="no-map">暂无打卡定位信息</div></div></el-dialog>
<script>
import visitedList from './visitedRecord/list.vue'
import { loadInitialMap } from '@/utils/loadInitialMap'export default {components: {visitedList},data() {return {positionDialog: false}},methods: {showPosition(position) {this.positionDialog = truethis.latitude = position.latitude ? position.latitude : 0this.longitude = position.longitude ? position.longitude : 0if (this.latitude !== 0 || this.longitude !== 0) {this.initMap()}},initMap() {const timer = setInterval(() => {const map = document.querySelector('.has-map')if (map) {const address = [this.latitude, this.longitude]loadInitialMap('has-map', address, '')clearInterval(timer)}}, 200)}}
}
</script><style lang="scss" scoped>
.map {height: 400px;width: 600px;.no-map {height: 400px;width: 600px;display: flex;justify-content: center;align-items: center;background: #f5f5f5;}.has-map {margin-bottom: 10px;height: 400px;}
}
</style>

loadInitislmap.js

在这里插入代码片
/***** @export* @param {*} className 类名* @param {*} arr 经度纬度坐标数组* @param {*} addressName 地址名称*/
export function loadInitialMap(domID, arr, addressName) {// 设置中心点坐标const center = new window.TMap.LatLng(arr[0], arr[1])// 初始化地图const map = new window.TMap.Map(document.getElementById(domID), {rotation: 20, // 设置地图旋转角度pitch: 30, // 设置俯仰角度（0~45）zoom: 12, // 设置地图缩放级别center: center // 设置地图中心点坐标})const maketLyer = new window.TMap.MultiMarker({map: map,style: {myStyle: new window.TMap.MarkerStyle({width: 25, // 点标记样式宽度（像素）height: 35 // 点标记样式高度（像素）})},geometries: [{id: 'label-layer', // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此idstyleId: 'myStyle', // 指定样式idposition: new window.TMap.LatLng(arr[0], arr[1]), // 点标记坐标位置properties: {// 自定义属性title: 'marker1'}}]})// 简单文本标记const label = new window.TMap.MultiLabel({id: '1',map: map,styles: {label: new window.TMap.LabelStyle({color: '#6589DB', // 颜色属性size: 14, // 文字大小属性offset: { x: 0, y: 0 }, // 文字偏移属性单位为像素angle: 0, // 文字旋转属性alignment: 'center', // 文字水平对齐属性verticalAlignment: 'middle' // 文字垂直对齐属性})},geometries: [{id: 'label', // 点图形数据的标志信息styleId: 'label', // 样式idposition: center, // 标注点位置content: addressName, // 标注文本properties: {// 标注点的属性数据title: 'label'}}]})// 创建信息窗口const info = new window.TMap.InfoWindow({map,position: map.getCenter(),offset: { x: 0, y: -32 }})info.close()map.on('click', (evt) => {console.log(evt)// 获取click事件返回的poi信息const poi = evt.poiif (poi) {// 拾取到POIinfo.setContent(poi.name).setPosition(poi.latLng).open()} else {// 没有拾取到POIinfo.close()}})// 自执行中心点方法setCenter(map, arr)maketLyer.on('click', (event) => {console.log(event)info.open()info.setPosition(event.geometry.position)info.setContent(event.geometry.position.toString())})
}function setCenter(map, arr) {map.setCenter(new window.TMap.LatLng(arr[0], arr[1]))
}

主要需要在主结构处引入腾讯地图
public文件中的index

贴上一个博主的具体参考

以上只用作学习笔记

后台基于elment-dialog展示打卡定位腾讯地图相关推荐

小程序之定位签到打卡=＞腾讯地图SDK
说明:文章部分内容及图片出自网络,如有侵权请与我本人联系(主页有公众号:小攻城狮学前端) 作者:小只前端攻城狮. 主页:小只前端攻城狮. 首发:掘金 GitHub:P-J27. CSDN:PJ想做前端 ...
php微信使用腾讯地图进行定位,微信定位+腾讯地图导航
var transferService = newqq.maps.TransferService({//location: "广州", complete: function (re ...
SemSegMap ：基于3D点云语义信息的定位
点云PCL免费知识星球,点云论文速读. 文章:SemSegMap - 3D Segment-Based Semantic Localization 作者:Andrei Cramariuc, Flori ...
微信后台基于时间序的新一代海量数据存储架构的设计实践
本文作者腾讯WXG后台开发工程师jeryyzhang,收录时有改动,感谢原作者的分享. 1.引言大约3年前,微信技术团队分享了<微信后台基于时间序的海量数据冷热分级架构设计实践>一文,文 ...
基于Andriod的智慧校园卡系统的设计与实现
目录 1.课题研究立项依据 2.文献综述 3.课题研究的基本内容及预期目标或成果 4.课题的研究方案 5.研究进度安排 6.主要参考文献 1.课题研究立项依据随着信息技术的不断发展,数字化.智能化校 ...
开源一个后台基于bmob云端的社交app
今日科技快讯 7月17日起,乘坐G.D字头的动车组列车出行的旅客,可以通过12306网站.手机APP等方式订餐,订餐支持支付宝以及微信支付.乘客可订所乘列车餐车供应的餐食,也可预订沿途供餐站供应的社会 ...
基于Andriod的智慧校园卡一卡通系统的设计与实现
1.课题研究立项依据随着信息技术的不断发展,数字化.智能化校园的提出与教育现代化建设的不断推进,智能卡技术的不断发展进步,国内各高校都在发展建设各自的高校校园卡信息管理系统.按照某某大学关于建设高校 ...
基于激光雷达的里程计及3D点云地图中的定位方法
本文转载自公众号@点云PCL,基于激光雷达的里程计及3D点云地图中的定位方法 :https://mp.weixin.qq.com/s/laA1YAPBCpqlzdGi0yb2cQ 论文:LOL: Li ...
基于腾讯地图定位组件实现周边POI远近排序分布图
前言地图应用非常广泛,目前地图服务,都提供地图操作.标注.地点搜索.出行规划.地址解析.街景等接口,功能非常丰富.在实际开发过程中,各有优劣.本次基于需求,使用腾讯位置服务作为一个公用厕所位置标注的 ...

后台基于elment-dialog展示打卡定位腾讯地图

后台基于elment-dialog展示打卡定位腾讯地图相关推荐

最新文章

热门文章