所有技术栈:
1. 腾讯地图
2. vue-jsonp
最终实现效果图:
备注:
1. 图中红色标点通过经纬度动态生成
实现代码:
01 index.html中head标签中引入腾讯地图相关资源
<script src="https://map.qq.com/api/gljs?v=1.exp&key=这里写你的获取腾讯地图相关数据唯一key"></script>
02 安装vue-jsonp跨域请求腾讯地图资源
npm安装jsonp:
npm install vue-jsonp
main.js引入jsonp:
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp);
组件中使用jsonp请求地图资源:
methods方法如下3个【mounted中初始化调用this.initMapData()方法即可】:
// 初始化加载地图
initMapData() {
if (this.$jsonp) {
let url = "https://apis.map.qq.com/ws/location/v1/ip";
this.$jsonp(url, {
key: 这里写你的-获取腾讯地图相关数据唯一key,
output: "jsonp",
}).then((res) => {
// 初始化地图、地图标点
setTimeout(() => {
if (this.jobDetilasObj) {
this.initMap();
}
}, 300);
}).catch((() => {
this.$message.info('地图正在努力加载中...');
setTimeout(() => {
this.initMapData();
}, 1500)
}))
} else {
this.initMapData();
}
},
// 腾讯地图-初始化【注意:需要再index.html引入腾讯对应地图】
initMap() {
var center = new window.TMap.LatLng(this.jobDetilasObj.position_latitude, this.jobDetilasObj.position_longitude);
// 定义map变量,调用 TMap.Map() 构造函数创建地图
this.map = new window.TMap.Map(document.getElementById("asset_map"), {
center: center, // 设置地图中心点坐标
zoom: 17, // 设置地图缩放级别
viewMode: "2D",
// pitch: 43.5, // 设置俯仰角
// rotation: 45 // 设置地图旋转角度
});
this.createMarkers();
},
// 创建地图标点(当前公司所在位置)
createMarkers() {
// 多个标点-这里添加一个循环实现
const label = new LabelCluster({
map: this.map,
// id: id,
position: new window.TMap.LatLng(
this.jobDetilasObj.position_latitude,
this.jobDetilasObj.position_longitude
),
content: `<i class="iconfont icon-dingwei" style="color: #FB0000; font-size: 35px;"></i>` // 地图标点
})
},