Vue-腾讯地图进阶（多点，面，搜索...）

2021年11月05日 15:32 · 阅读 166

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

在之前8月的一篇 vue-腾讯地图的使用中介绍了使用腾讯地图绘制点、线，近来项目升级，需要绘制围栏、多点以及搜索功能，围栏就是一个闭合的面，当点超出围栏即为不合格，多点就是自己画点，可拖动点的位置，同时支持了输入关键字可搜索的地名的功能，经过一番敲敲打打，积累了一些经验，记录一下。

基础的代码不再赘述，重点说一下升级的地方

一.绘制围栏

// 回显围栏
if(this.latLng && this.latLng.length > 0){
    let path = [];
    this.latLng.forEach(item => {
        path.push(new window.qq.maps.LatLng(item.lat,item.lng));
    });
    this.getArea(path);
}else {
    // 绘图工具
    this.getDrawMan();
}
复制代码

1.获取绘图工具

getDrawMan() {
    // 绘图工具
    drawingManager = new window.qq.maps.drawing.DrawingManager({
        drawingMode: window.qq.maps.drawing.OverlayType.POLYGON,
        // 设置DrawingManager地图控件的参数
        drawingControlOptions: {
            position: window.qq.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                window.qq.maps.drawing.OverlayType.POLYGON,
            ]
        },
        // 绘制polygon的属性
        polygonOptions: {
            strokeColor: '#5584FF',
            fillColor: new window.qq.maps.Color(85, 132, 255, 0.5),
            strokeWeight: 5,
            strokeDashStyle: 'dash',// 多边形的形状。实线是solid，虚线是dash。
            clickable: true,// 多边形是否可点击
            editable: true,
        },
        snapMode: true,
    });
    drawingManager.setMap(map);
    // 绘制完成
    window.qq.maps.event.addListener(drawingManager, 'polygoncomplete', (event)=> {
        // 绘制完成后，将经纬度坐标传给父级
        this.$emit('saveLatLng',event.getPath().elems, zoomLevel);
        drawingManager.setDrawingMode(null);// 清除绘制模式
        this.lines = event;
        polygon = null;
    })
},
复制代码

2.绘制围栏

getArea(path){
    polygon = new window.qq.maps.Polygon({
        path: path,// 多边形的路径，以经纬度坐标数组构成
        strokeColor: '#5584FF',
        fillColor: new window.qq.maps.Color(85, 132, 255, 0.5), // 多边形的填充色，可通过Color对象的alpha属性设置透明度。
        strokeDashStyle: 'dash',// 多边形的边框样式 实线是solid，虚线是dash。
        strokeWeight: 5,// 多边形的边框线宽
        map: map,// 要显示多边形的地图
        clickable: true,// 多边形是否可点击
        editable: !this.disabled,// 启动编辑功能后，可拖动端点对多边形进行调整，双击节点可删除
        zIndex: 1000,
    });
    let _this = this;
    // 新增节点
    window.qq.maps.event.addListener(polygon,"insertNode",function(event){
        _this.$emit('saveLatLng',event.path.elems, zoomLevel);
    });
    // 移动节点
    window.qq.maps.event.addListener(polygon,"adjustNode",function(event){
        _this.$emit('saveLatLng',event.path.elems, zoomLevel);
    });
    // 删除节点
    window.qq.maps.event.addListener(polygon,"removeNode",function(event){
        _this.$emit('saveLatLng',event.path.elems, zoomLevel);
    });
},
复制代码

具体的效果如下：实心的白点是可拖动位置的，围栏必须是闭合的

二.绘制多点

// 添加dom监听事件
window.qq.maps.event.addListener(map, 'click', (event)=> {
    this.addMarker(event.latLng);
    marker.setPosition(event.latLng);
    this.$emit('saveLatLng',markerArray, zoomLevel);
});
// 添加标记
if(this.latLng && this.latLng.length) {
    this.latLng.forEach(item => {
        let location = new window.qq.maps.LatLng(item.latitude,item.longitude);
        this.addMarker(location);
    })
}
复制代码

添加标记

addMarker(location) {
    marker = new window.qq.maps.Marker({
        icon: new window.qq.maps.MarkerImage(require('@/assets/images/marker_blue.png'), new window.qq.maps.Size(32, 37)),
        position: location,
        map: map,
        title: new Date().getTime()
    });
    // 非查看时候可移动
    if(!this.disabled){
        marker.setDraggable(true);// 设置标记可拖拽
    }
    let that = this;
    markerArray.push(location);// 回调用
    markerArr.push(marker);// 删除时候用
    // 设置Marker停止拖动事件
    window.qq.maps.event.addListener(marker, 'dragend', function(event) {//
        markerArray = [];
        markerArr.forEach(item =>{
            if(item.title == marker.title){
                item.lat = (event.latLng.lat).toFixed(6);
                item.lng = (event.latLng.lng).toFixed(6);
            }
            let location = new window.qq.maps.LatLng(item.position.lat,item.position.lng);
            that.addMarker(location);
        })
        that.$emit('saveLatLng',markerArray, zoomLevel);
    });
},
复制代码

效果图如下：

三.实现搜索功能

1.搜索地点html

<el-input v-model="keyword" placeholder="请输入关键字搜索" id="place" class="wid240"></el-input> 输入地址，自动完成
复制代码

引入搜索库map.qq.com/api/js?v=2.…" + baseMapKey，baseMapKey是自己申请的key

2.搜索地点js

// 搜索实例化自动完成
this.ap = new window.qq.maps.place.Autocomplete(document.getElementById('place'), {
    offset: new window.qq.maps.Size(0, 5),
    location: '南京市'
});
// 调用Poi检索类。用于进行本地检索、周边检索等服务
this.searchService = new window.qq.maps.SearchService({
    complete: function(results){
        if(!keyword){
            if (markerSearchArr) {
                for (let i in markerSearchArr) {
                    markerSearchArr[i].setMap(null);
                }
            }
            markerSearchArr = [];
            return;
        }
        if(results.type === "CITY_LIST") {
            that.searchService.setLocation(results.detail.cities[0].cityName);
            that.searchService.search(keyword);
            return;
        }
        let pois = results.detail.pois;
        let latlngBounds = new window.qq.maps.LatLngBounds();
        for(let i = 0,l = pois.length;i < l; i++){
            let poi = pois[i];
            latlngBounds.extend(poi.latLng);
            let marker = new window.qq.maps.Marker({
                map: map,
                position: poi.latLng
            });
            marker.setTitle(poi.name);
            markerSearchArr.push(marker);// 删除时候用
        }
        map.fitBounds(latlngBounds);
    }
});
// 添加搜索监听事件
window.qq.maps.event.addListener(this.ap, "confirm", function(res){
    keyword = res.value;
    that.searchService.search(keyword);
});
// 搜索结束
复制代码

效果图如下：

以上是对腾讯地图的进一步使用了，记录一下，温故而知新！