百度地图接口实现添加坐标点和路线

之前在工作中实现了一个小的功能模块是调用百度地图的接口，实现初始化位置点和路线以及自己添加位置点和路线的功能，现在记录一下，方便自己以后来回顾知识。 此demo主要实现了以下功能：

在地图上添加位置点，并添加位置点的名称备注js实现鼠标移上去显示详细信息，右键停止添加位置点，添加点之后在左侧有一个位置点的列表，当点击列表中的点时，地图会将中心点移动到该点，并在点上显示标签为该位置点的名称备注。在地图上可以添加一条路线，完成路线时右键停止，然后点击保存路线会弹出该线上所有折点的位置点所构成的字符串，点击编辑路线，路线就开启编辑功能，可以修改路线。

下面是添加点的效果图

添加路线时的效果图

以下是JS部分源码

var map;
var myVue;
var addpoint = false;  //添加点的判断
var addline = false;  //添加线的判断
$(function () {
    initMap();
    myVue = new Vue({
        el:'#app',
        data:{
            action:'',
            points:[],      // 点的集合
            linepoints:[],  //路线上的点的集合
            mouseMarker:'',  //跟随鼠标移动的marker点
            mouseMarkerTitle:'',  //鼠标移动时显示的label
            lines:[],       //线的集合
            mouseLine:{} ,   //跟随鼠标移动时的虚拟线
            initLine:null,    //初始化时的线
            myIcon: '',
            tmpLabel:'',
            editLine:'',     //可编辑的路线
            dialogVisible:false,   //控制信息框的显示与隐藏
            lineInfo:'',          //路线上的折点组成的字符串  lng,lat；lng,lat...
        },
        methods:{
            //菜单项位置点点击事件
            pointClick:function () {
                this.clear();
                this.action = "point";
                map.disableDoubleClickZoom();
                map.addEventListener('rightclick',myVue.clear);
                map.addEventListener('mousemove',myVue.mouseMove);
                map.addEventListener('click',myVue.addpoint);
            },
            //菜单项线点击事件
            lineClick:function () {
                myVue.clear();
                this.action = "line";
                map.addEventListener('click',this.addLine)
                map.addEventListener('rightclick',myVue.clear);
                map.addEventListener('mousemove',myVue.mouseMove);
            },
            save:function () {
                if (this.editLine!=""){
                    this.editLine.disableEditing();
                    this.linepoints = this.editLine.getPath();
                }
               const {linepoints} = this;
               this.lineInfo = "";
               for(let i=0;i {
                        done();
                    })
                    .catch(_ => {});
            },
            mouseMove:function (e) {
                //console.log(1);
                if (this.action=='point'){
                    myVue.showMousePoint(e);
                }else if(this.action=='line'){
                    myVue.showMouseLine(e);
                }
            },
            addpoint:function (e) {
                if (this.action=='point'){
                    this.$prompt('请输入位置点名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        var marker = new BMap.Marker(e.point,{icon:this.myIcon});
                        map.addOverlay(marker);
                        marker.name = value;
                        myVue.points.push(marker);
                        this.$message({
                            type: 'success',
                            message: '位置点: ' + value+'添加成功',
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '位置点添加失败'
                        });
                    });
                }
            },
            addLine:function (e) {
                if(this.action=='line'){
                    if (this.linepoints.length>0){
                        const line = new BMap.Polyline([this.linepoints[this.linepoints.length-1],e.point],{strokeColor: '#00F0f0',strokeWeight:5,strokrOpacity:1});
                        map.addOverlay(line);
                        this.lines.push(line);
                    }
                    this.linepoints.push(e.point)
                }
            },
            showMouseLine:function (e) {
                if (this.mouseMarker==""){
                    const mouseMarker = new BMap.Marker(e.point,{icon:this.myIcon});
                    map.addOverlay(mouseMarker);
                    this.mouseMarker = mouseMarker;
                }else {
                    this.mouseMarker.setPosition(e.point);
                }
                if (this.linepoints.length>0){
                    const mouseline = new BMap.Polyline([this.linepoints[this.linepoints.length-1],e.point],{strokeColor: '#00F5A9',strokeWeight:5,strokrOpacity:0.3});
                    map.addOverlay(mouseline);
                    map.removeOverlay(this.mouseLine);
                    this.mouseLine = mouseline;
                }
            },
            showMousePoint:function (e) {
                if (this.mouseMarker==""){
                    this.mouseMarker = new BMap.Marker(e.point,{icon:this.myIcon});
                    map.addOverlay(this.mouseMarker);
                }
                this.mouseMarker.setPosition(e.point);
            },
            toCenter:function (i) {
               if (myVue.tmpLabel!=''){
                   map.removeOverlay(myVue.tmpLabel);
                   myVue.tmpLabel = '';
               }
                map.panTo(myVue.points[i].point);
                var str = " 
 "+myVue.points[i].name+"
";
                const label = new BMap.Label(str,{position:myVue.points[i].point});
                myVue.tmpLabel = label;
                map.addOverlay(label);
            }
        },
        mounted:function () {
            var myIcon = new BMap.Icon("imgs/point.png", new BMap.Size(40, 50))
                myIcon.setImageSize(new BMap.Size(40,50));
            this.myIcon = myIcon;
            this.points = initPoints();
        }
    })
})
function initPoints(){
    var myIcon = new BMap.Icon("imgs/point.png", new BMap.Size(40, 50))
    myIcon.setImageSize(new BMap.Size(40,50));
    var marker = [];
    marker[0] = new BMap.Marker(new BMap.Point(118.082868,36.829153),{icon:myIcon});
    marker[0].name = "东方实验学校";
    marker[1] = new BMap.Marker(new BMap.Point(118.075933,36.830077),{icon:myIcon});
    marker[1].name = "东方星城";
    marker[2] = new BMap.Marker(new BMap.Point(118.067365,36.834728),{icon:myIcon});
    marker[2].name = "温馨家园";
    marker[3] = new BMap.Marker(new BMap.Point(118.070112,36.83906),{icon:myIcon});
    marker[3].name = "魏家庄";
    marker[4] = new BMap.Marker(new BMap.Point(118.0575,36.829644),{icon:myIcon});
    marker[4].name = "流泉新村";
    marker[5] = new BMap.Marker(new BMap.Point(118.0564458,36.838945),{icon:myIcon});
    marker[5].name = "中房翡翠园";
    marker[6] = new BMap.Marker(new BMap.Point(118.055272,36.833977),{icon:myIcon});
    marker[6].name = "柳泉中学";
    marker[7] = new BMap.Marker(new BMap.Point(118.042174,36.834829),{icon:myIcon});
    marker[7].name = "金丽大厦";
    marker[8] = new BMap.Marker(new BMap.Point(118.047978,36.830424),{icon:myIcon});
    marker[8].name = "淄博市公安局";
    for (let i=0;i

 

    
    
    
    
    
    
    
    
    
    
    


 

    
    
 
    
    
 
    

        

            
选择模式
            拖拽地图模式
            
            拖拽图标模式
        
        

            开始选点
            关闭选点
        
        

            
选址结果
            
经纬度:
            

            
地址:
            

            
最近的路口:
            

            
最近的路:
            

            
最近的POI: