vue项目中使用腾讯地图一些小记录

原创已于 2024-06-19 17:20:36 修改 · 2.3k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

于 2022-11-09 17:16:41 首次发布

这篇博客介绍了如何利用腾讯位置服务的JavaScriptAPI在3D模式下初始化地图，设置不同样式的位点，并实现位点点击切换样式的效果。通过注册地图key并在vue页面中引入，创建MultiMarker对象，定义不同风格的MarkerStyle，以及InfoWindow信息窗口。同时，博主还提供了自适应显示marker的方法和位点点击事件的监听回调函数，实现了位点信息的交互功能。

官网：JavaScript API | 腾讯位置服务

一、初始化地图

注册地图key，index.html中引入key

index.hrml

下面是vue页面实现内容

<div id="bgmap" style="width: 100%; height: 100vh;"></div>

data(){
            map: null,
            marker: null,
            infoWindow: null,//地图位点点击展示的弹窗
            // 当前展示的标记点数组
            markerArr: [
                {
                    add: "xxx"
                    address: "xxxx",
             
                    biz_id: "*****",
                    id: "********",
                    latitude: 22.82374749,//0-90
                    longitude: 113.26149523,//0-180
                    name: "testName",
                    park: 1,
                    styleId: "twotype",
                    
                },
                
            ],

             chooseItem: null,//选中的地图点信息
            showScaleVideo: false,//显示缩放
    
}

二、关键函数

init() ,初始化对象，调用地图marker函数绘制位点initMarkerObj()，调用位点展示函数showMarker()

 init() {
            var that = this
    
            this.map = new TMap.Map(document.getElementById("bgmap"), {
                center: new TMap.LatLng(22.820802, 113.261556),
                zoom: 11,
                mapStyleId: 'style2',//夜间模式
                viewMode: '3D',//3D模型
                baseMap: {
                    type: 'vector',
                    features: ['base', 'building3d'], // 隐藏矢量文字
                },
            });
            this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);//移除腾讯地图比例尺
            this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);//移除腾讯地图旋转控件
            //移除腾讯地图缩放控件
            this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);

            this.map.setZoom(17.3)//缩放比例
            this.map.setPitch(62);//3D倾斜角度
           
            this.initMarkerObj()
            this.showMarker()

            // setTimeout(function () {

            //     // 删除地图水印
            //     document.getElementById("bgmap").children[1].removeChild(document.getElementById("bgmap").children[1].children[1]);

            // }, 2000)
        },

2、地图点设置不同的样式 initMarkerObj()

根据官方提供案例，我设置不同的styles,使得位点可以使用不同的样式（onetype、twotype)

设置位点信息窗口TMap.InfoWindow，信息窗需要自己写入代码设置样式。

        initMarkerObj() {
            var that = this

            this.marker = new TMap.MultiMarker({
                id: 'marker_s',
                map: this.map, // 显示Marker图层的底图
                styles: {
                    onetype: new TMap.MarkerStyle({//onetype是呼吸点样式名称
                        // 点标注的相关样式
                        width: 78, // 宽度
                        height: 100, // 高度
                        anchor: { x: 39, y: 50 }, // 标注点图片的锚点位置
                        src: require("@/../static/icon/loca1.png"), // 标注点图片url或base64地址
                        color: '#fff', // 标注点文本颜色
                        size: 18, // 标注点文本文字大小
                        direction: 'top', // 标注点文本文字相对于标注点图片的方位
                        offset: { x: 0, y: 10 }, // 标注点文本文字基于direction方位的偏移属性
                        strokeColor: '#fff', // 标注点文本描边颜色
                        strokeWidth: 0.5, // 标注点文本描边宽度
                    }),
                    twotype: new TMap.MarkerStyle({
                        // 点标注的相关样式
                        width: 78, // 宽度
                        height: 100, // 高度
                        anchor: { x: 39, y: 50 }, // 标注点图片的锚点位置
                        src: require("@/../static/icon/car_loca1.png"), // 标注点图片url或base64地址
                        color: '#fff', // 标注点文本颜色
                        size: 18, // 标注点文本文字大小
                        direction: 'top', // 标注点文本文字相对于标注点图片的方位
                        offset: { x: 0, y: 10 }, // 标注点文本文字基于direction方位的偏移属性
                        strokeColor: '#fff', // 标注点文本描边颜色
                        strokeWidth: 0.5, // 标注点文本描边宽度
                    }),
                   
                },
                enableCollision: true, // 开启碰撞
                geometries: that.markerArr,//位点数组
            });

            // var infoWindow
            // 初始化infoWindow
            this.infoWindow = new TMap.InfoWindow({
                map: that.map,
                zIndex: 110,
                position: new TMap.LatLng(that.latitude, that.longitude),
                offset: { x: 0, y: -80 } //设置信息窗相对position偏移像素
            });
            this.infoWindow.close();//初始关闭信息窗关闭

            //监听回调函数（非匿名函数）
            var eventClick = function (e) {
                for (let i = 0; i < that.marker.geometries.length; i++) {
                    //判断是否点击某个位点 修改成点击状态
                    if (e.geometry.id === that.markerArr[i].id) {
                        that.chooseItem = that.markerArr[i]
                        if (that.markerArr[i].styleId == 'onetype' ) {
                            
                                that.markerArr[i].styleId = 'twotype'
                                that.markerArr[i].rank = 100
                            

                         that.infoWindow.open(); //打开信息窗
                         that.infoWindow.setPosition(e.geometry.position);//设置信息窗位置
                         that.infoWindow.setContent('<div id="infor_win"             
                              class="infor_win" style=" height:200px; width: 200px;">' +
                              '</div>');//设置信息窗内容        
                            })
                        }
                        else if (that.markerArr[i].styleId == 'twotype') {
                            
                                that.markerArr[i].styleId = 'onetype'
                                that.markerArr[i].rank = 1
                            
                            // that.marker.updateGeometries(that.markerArr)
                            that.infoWindow.close();
                        }

                    }
                    else {//其他未点击位点修改成未点击状态
                        that.markerArr[i].rank = 1
                        if (that.markerArr[i].styleId == 'twotype') {
                           
                                that.markerArr[i].styleId = 'onetype'
                            
                        }
                    }
                }

                that.marker.updateGeometries(that.markerArr)//更新位点样式
                that.$forceUpdate()
            }

            // 标记点点击事件
            this.marker.on("click", eventClick)

            that.$forceUpdate()
        },

3、自适应显示marker

        //设置自适应显示marker
        showMarker() {
            //初始化
            var bounds = new TMap.LatLngBounds();
            //判断标注点是否在范围内
            this.markerArr.forEach(function (item) {
                //若坐标点不在范围内，扩大bounds范围
                if (bounds.isEmpty() || !bounds.contains(item.position)) {
                    bounds.extend(item.position);
                }
            })
            //设置地图可视范围
            this.map.fitBounds(bounds, {
                padding: 100 // 自适应边距
            });
        },