This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

In August before a vue – tencent map using tencent mapping are introduced in the use of point, line, the recent upgrade project, need to draw a fence, multipoint and search functions, the fence is a closed surface, when a point beyond the fence is not qualified, more is the point of his paintings, can drag point location, at the same time support the input keywords to search the function of the place names, After a knock knock, accumulated some experience, record.

I won’t go over the basic code, but focus on the upgrades

Draw the fence

// Echo the fence
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 {
    // Drawing tool
    this.getDrawMan();
}
Copy the code

1. Obtain drawing tools

getDrawMan() {
    // Drawing tool
    drawingManager = new window.qq.maps.drawing.DrawingManager({
        drawingMode: window.qq.maps.drawing.OverlayType.POLYGON,
        // Set parameters for the DrawingManager map control
        drawingControlOptions: {
            position: window.qq.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                window.qq.maps.drawing.OverlayType.POLYGON,
            ]
        },
        // Draw the polygon property
        polygonOptions: {
            strokeColor: '#5584FF'.fillColor: new window.qq.maps.Color(85.132.255.0.5),
            strokeWeight: 5.strokeDashStyle: 'dash'.// Polygon shape. The solid line is solid and the dotted line is DASH.
            clickable: true.// Whether polygons are clickable
            editable: true,},snapMode: true}); drawingManager.setMap(map);// The drawing is complete
    window.qq.maps.event.addListener(drawingManager, 'polygoncomplete'.(event) = > {
        // After drawing, pass the latitude and longitude coordinates to the parent
        this.$emit('saveLatLng',event.getPath().elems, zoomLevel);
        drawingManager.setDrawingMode(null);// Clear the drawing mode
        this.lines = event;
        polygon = null; })},Copy the code

2. Draw the fence

getArea(path){
    polygon = new window.qq.maps.Polygon({
        path: path,// The paths of polygons are made up of latitude and longitude coordinates
        strokeColor: '#5584FF'.fillColor: new window.qq.maps.Color(85.132.255.0.5), // The opacity of the polygon can be set via the alpha property of the Color object.
        strokeDashStyle: 'dash'.// Polygon border styles are solid and dash.
        strokeWeight: 5.// The border width of the polygon
        map: map,// Map to display polygons
        clickable: true.// Whether polygons are clickable
        editable:!this.disabled,// After the editing function is enabled, you can drag the endpoint to adjust the polygon. Double-click the node to delete it
        zIndex: 1000});let _this = this;
    // Add a node
    window.qq.maps.event.addListener(polygon,"insertNode".function(event){
        _this.$emit('saveLatLng',event.path.elems, zoomLevel);
    });
    // Move the node
    window.qq.maps.event.addListener(polygon,"adjustNode".function(event){
        _this.$emit('saveLatLng',event.path.elems, zoomLevel);
    });
    // Delete a node
    window.qq.maps.event.addListener(polygon,"removeNode".function(event){
        _this.$emit('saveLatLng',event.path.elems, zoomLevel);
    });
},
Copy the code

The effect is as follows: solid white dots are draggable positions and fences must be closed

Two. Draw multiple points

// Add dom listening events
window.qq.maps.event.addListener(map, 'click'.(event) = > {
    this.addMarker(event.latLng);
    marker.setPosition(event.latLng);
    this.$emit('saveLatLng',markerArray, zoomLevel);
});
// Add tags
if(this.latLng && this.latLng.length) {
    this.latLng.forEach(item= > {
        let location = new window.qq.maps.LatLng(item.latitude,item.longitude);
        this.addMarker(location); })}Copy the code

Add tag

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()
    });
    // Can be moved when not viewing
    if(!this.disabled){
        marker.setDraggable(true);// Set the tag to drag
    }
    let that = this;
    markerArray.push(location);/ / call back
    markerArr.push(marker);// Delete
    // Set Marker to stop dragging event
    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);
    });
},
Copy the code

The renderings are as follows:

Three. Realize the search function

1. Search the location HTML

<el-input v-model="keyword" placeholder="Please enter a keyword search" id="place" class="wid240"></el-input> Enter the address, automatic completionCopy the code

Introduce the search library map.qq.com/api/js?v=2….” + baseMapKey. BaseMapKey is the key applied for by the user

2. Search for location JS

// Search instantiation completes automatically
this.ap = new window.qq.maps.place.Autocomplete(document.getElementById('place'), {
    offset: new window.qq.maps.Size(0.5),
    location: Nanjing City
});
// Call Poi to retrieve the class. Used for local search, peripheral search and other services
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);// Delete} map.fitBounds(latlngBounds); }});// Add the search listening event
window.qq.maps.event.addListener(this.ap, "confirm".function(res){
    keyword = res.value;
    that.searchService.search(keyword);
});
// The search is over
Copy the code

The renderings are as follows:

The above is the further use of Tencent map, record, review the old and know new!