记录在Vue项目里面使用腾讯地图
Vue使用腾讯地图
·
目录
前言
本文主要记录一下在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;
},
// 渲染marker
renderMarker() {
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>
在地图上绘制图形并计算面积和绘制路线同理,只是调用的方法不一样,可自行实现。如有错误,欢迎指正。
更多推荐
已为社区贡献1条内容
所有评论(0)