Vue2使用-腾讯地图

所有技术栈：
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>` // 地图标点
            })
        },