This is the 5th day of my participation in the August More Text Challenge.

Projects recently met need planning route on the map, change line, check circuit, tagging, modify, view points of requirements, carefully studied the map of tencent’s official website, have a little bit of experience, to summarize, (actual combat experience, this article only said specific document properties, website clear), consider!

To implement the following map, including:

Draw a line

1. Draw a line, drag the line to edit it, and double-click to delete a node

HTML part

<div class="mapContainer">
    <span>Km: {{distanceDraw}} km</span>
    <el-button size="mini" type="primary" @click="delPolygon" class="btn" v-if=! "" disabled">redraw</el-button>
    <div id="mapItem" class="mapBox" :style="{ width: mapStyle.width, height: mapStyle.height, }"></div>
</div>
Copy the code

Js section, define variables

data() {
    return {
        paths: [].// Line node
        longitude: '118.90581786632538'./ / longitude
        latitude: '31.912693393211505'./ / latitude
        lngLatData: [].// Draw polygon coordinate points
        distanceDraw: 0.// Draw the distance
        lines: ' '}; },props: {
    latLng: Array.distance: {
        type: String.default: ' '
    },
    center: Array.zoom: {
        type: Number.default: 13,},mapStyle: {type:Object.default(){
            return{
                width: '100%'.height: '550px',}}},disabled: Boolean,},Copy the code

Introduce the required JS, as required to introduce the required JS (key need to apply for one)

loadMap() {
    return new Promise(function(resolve, reject) {
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://map.qq.com/api/gljs?libraries=geometry&v=2.exp&key="+ baseMapKey;
        script.onerror = reject;
        document.head.appendChild(script);
        let script2 = document.createElement("script");
        script2.type = "text/javascript";
        script2.src = "https://map.qq.com/api/js?v=2.exp&libraries=drawing&key="+ baseMapKey;
        script2.onerror = reject;
        document.head.appendChild(script2);
        resolve();
    });
},
Copy the code

Map initialization

init() {
    if(this.center && this.center.length > 0) {
        this.latitude = this.center[0];
        this.longitude = this.center[1];
    }
    this.distanceDraw = this.distance || 0;
    zoomLevel = this.zoom || 13;
    // Map initialization
    map = new window.qq.maps.Map(document.getElementById('mapItem'), {
        center: new window.qq.maps.LatLng(this.latitude,this.longitude),
        zoom: this.zoom, // Set the map zoom level
        scrollwheel: false.scaleControl: true.// Enable scale
        scaleControlOptions: {
            // Set the position of the controls to align with the lower right corner and align them to the left
            position: window.qq.maps.ControlPosition.BOTTOM_RIGHT
        },
        zoomControl: true.// Sets the position and style of the zoom control
        zoomControlOptions: {
            // Set the position of the zoom control to relative left-center alignment.
            position: window.qq.maps.ControlPosition.TOP_LEFT,
            // Set the zoom control style to contain only two zoom buttons
            style: window.qq.maps.ZoomControlStyle.LARGE
        },
        panControl: true.// Pan control
        mapTypeControl: false.// The default is map and satellite
    });
    let that = this;
    window.qq.maps.event.addListener(map,'zoom_changed'.() = > {
        zoomLevel = map.getZoom();
        that.$emit('saveLatLng'.null.null, zoomLevel);
    });

    // Echo the line
    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.getLine(path);
    }else {
        // Drawing tool
        this.getDrawMan(); }},Copy the code

Gets the drawing tool and sets drawing properties

getDrawMan() {
    // Drawing tool
    drawingManager = new window.qq.maps.drawing.DrawingManager({
        drawingMode: window.qq.maps.drawing.OverlayType.POLYLINE,
        // Whether to enable the DrawingManager map control. Default is false
        // drawingControl: true,
        // Set parameters for the DrawingManager map control
        drawingControlOptions: {
            position: window.qq.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                window.qq.maps.drawing.OverlayType.POLYLINE,
            ]
        },
        // Draw the properties of polyline
        polylineOptions: {
            strokeLinecap: 'square'.// The shape of the cap at the end of the line is round (default), square is square, and flat is butt.
            strokeColor: new window.qq.maps.Color(0.0.0.1),
            strokeWeight: 5.strokeDashStyle: 'solid'.// The shape of the polyline. The solid line is solid and the dotted line is DASH.
            clickable: true.// Whether the line is clickable
            editable: true,},snapMode: true}); drawingManager.setMap(map);// The drawing is complete
    window.qq.maps.event.addListener(drawingManager, 'polylinecomplete'.(event) = > {
        this.getDistance(event.getPath().elems);
        this.$emit('saveLatLng',event.getPath().elems, this.distanceDraw, zoomLevel);
        drawingManager.setDrawingMode(null);// Clear the drawing mode
        this.lines = event;
        polyline = null; })},Copy the code

Calculate the actual distance of the path

getDistance(paths) {
    let distance = 0;
    let startPoint = new window.TMap.LatLng(paths[0].lat, paths[0].lng);
    let endPoint = ' ';
    for(let i = 1; i < paths.length; i++){ endPoint =new window.TMap.LatLng(paths[i].lat, paths[i].lng);
        let path = [startPoint, endPoint];
        distance += window.TMap.geometry.computeDistance(path);
        startPoint = endPoint;
    }
    this.distanceDraw = (distance / 1000).toFixed(2);
},
Copy the code

2. Redraw

Delete the initialized polygon, i.e. redraw it

delPolygon() {
    if(polyline){
        polyline.setMap(null);
    }else{
        this.lines.setMap(null);
    }
    this.getDrawMan();
    this.distanceDraw = 0;
    this.$emit('saveLatLng'[],'0', zoomLevel);
},
Copy the code

3. Edit the line displayed in the command output and modify the line

Draw lines, add, modify and delete nodes

getLine(path){
    polyline = new window.qq.maps.Polyline({
        path: path,// The path of the broken line is composed of an array of latitude and longitude coordinates
        strokeColor: '# 000'.strokeWeight: 5.map: map,// To display the broken line map
        clickable: true.// Whether the line is clickable
        editable:!this.disabled,// After the editing function is enabled, you can drag the endpoint to adjust the broken line. Double-click the node to delete it
        zIndex: 1000});let _this = this;
    // Add a node
    window.qq.maps.event.addListener(polyline,"insertNode".function(event){
        _this.getDistance(event.path.elems);
        _this.$emit('saveLatLng',event.path.elems, this.distanceDraw, zoomLevel);
    });
    // Move the node
    window.qq.maps.event.addListener(polyline,"adjustNode".function(event){
        _this.getDistance(event.path.elems);
        _this.$emit('saveLatLng',event.path.elems, this.distanceDraw, zoomLevel);
    });
    // Delete a node
    window.qq.maps.event.addListener(polyline,"removeNode".function(event){
        _this.getDistance(event.path.elems);
        _this.$emit('saveLatLng',event.path.elems, this.distanceDraw, zoomLevel);
    });
},
Copy the code

Two. Draw points

Where the HTML, JS properties, introduced JS above the line, the next to say the difference

1. The plot points

Map initialization

init() {
    map = new window.qq.maps.Map(document.getElementById('mapItem'), {
        center: new window.qq.maps.LatLng(this.latitude,this.longitude),
        zoom: 13.// Set the map zoom level
        scaleControl: true.// Enable scale
        scaleControlOptions: {
            // Set the position of the controls to align with the lower right corner and align them to the left
            position: window.qq.maps.ControlPosition.BOTTOM_RIGHT
        },
        scrollwheel: false.zoomControl: true.// Sets the position and style of the zoom control
        zoomControlOptions: {
            // Set the position of the zoom control to relative left-center alignment.
            position: window.qq.maps.ControlPosition.TOP_LEFT,
            // Set the zoom control style to contain only two zoom buttons
            style: window.qq.maps.ZoomControlStyle.LARGE
        },
        panControl: true.// Pan control
        mapTypeControl: false.// The default is map and satellite
    });
    window.qq.maps.event.addListener(map,'zoom_changed'.function() {
        zoomLevel = map.getZoom();
    });
    // Add dom listening events
    window.qq.maps.event.addListener(map, 'click'.(event) = > {
        if(! marker){this.addMarker(event.latLng, 1);
        }
        marker.setPosition(event.latLng);
        this.$emit('saveLatLng',event.latLng, zoomLevel);
    });
    if(this.latLng.latitude ! = =' ' && this.latLng.latitude ! = =null) {
        let location = new window.qq.maps.LatLng(this.latLng.latitude,this.latLng.longitude);
        this.addMarker(location); marker.setPosition(location); }},Copy the code

2. Redraw

Remove the tag

// Delete the tag
deleteOverlays(flag) {
    if (markerArray) {
        for (let i in markerArray) {
            markerArray[i].setMap(null);
        }
        marker = null;
        markerArray.length = 0;
        if(flag == 1) {this.$emit('saveLatLng'.null, zoomLevel); }}else {
        this.$message({
            message: 'Deletion failed, please mark a location first'.type: 'error'}); }},Copy the code

3. Edit the echo point and modify the point

Add tag

// Add tags
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(50.50)),
        position: location,
        map: map
    });
    markerArray = [marker];
},

Copy the code

At the end of the article, I give you a careful heart!

Above is the use of Tencent map in the project of all the code, thank you for watching!

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue- Use of Tencent map

Draw a line

1. Draw a line, drag the line to edit it, and double-click to delete a node

2. Redraw

3. Edit the line displayed in the command output and modify the line

Two. Draw points

1. The plot points

2. Redraw

3. Edit the echo point and modify the point

Vue- Use of Tencent map

Draw a line

1. Draw a line, drag the line to edit it, and double-click to delete a node

2. Redraw

3. Edit the line displayed in the command output and modify the line

Two. Draw points

1. The plot points

2. Redraw

3. Edit the echo point and modify the point

Related Posts

Algorithm learning idea

Look no further than this article to thoroughly understand flex’s elastic layout!

Who knows what new Vue has been through?