vue利用百度地图api画路线&打点&滑入展示（坐标）_vue 百度地图 点 平滑

1.创建地图容器

<div id="allmap" style=" border-radius: 5px;" ></div>
1

2.展示百度地图

guiji() {
      var map = new BMap.Map('allmap')
      var point = new BMap.Point(132.1321213213,382651646846) //随便写的坐标
 }
1
2
3
4

3.画出路线（注意看注释）

guiji() {
      var map = new BMap.Map('allmap')
      var point = new BMap.Point(132.1321213213,382651646846) //随便写的坐标
      this.points.map(v => {   //points是对象（含经纬度）
        var pt = new BMap.Point(v.siteLongitude,v.siteLatitude)
        pois.push(pt)
      })
      var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
          scale: 0.6,//图标缩放大小
          strokeColor:'#fff',//设置矢量图标的线填充颜色
          strokeWeight: '2',//设置线宽
      }); //路线样式！！！！！！！！！！！！！！！！！！！！！！！！！！
      var icons = new BMap.IconSequence(sy, '10%', '10%',false);
      
      let num = 0;
      for(let i = 0; i < pois.length; i++){
        if(pois[0].lat == pois[i].lat && pois[0].lng == pois[i].lng) num++
      } //此处FOR循环，本人觉得必须要，百度地图路线不允许所有坐标都一样
      if(num!=pois.length){
        var polyline = new BMap.Polyline(pois, {
          enableEditing: false, // 是否启用线编辑，默认为false
          enableClicking: false, // 是否响应点击事件，默认为true
          icons: [icons],
          strokeWeight: 8, // 折线的宽度，以像素为单位
          strokeOpacity: 1, // 折线的透明度，取值范围0 - 1
          strokeColor: '#4C7FED' // 折线颜色
        })
        map.addOverlay(polyline)
      }
      
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

4.打点&滑入展示（注释很重要）

guiji() {
      var map = new BMap.Map('allmap')
      var point = new BMap.Point(132.1321213213,382651646846) //随便写的坐标
      this.points.map(v => {   //points是对象（含经纬度）
        var pt = new BMap.Point(v.siteLongitude,v.siteLatitude)
        pois.push(pt)
      })
      var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
          scale: 0.6,//图标缩放大小
          strokeColor:'#fff',//设置矢量图标的线填充颜色
          strokeWeight: '2',//设置线宽
      }); //路线样式！！！！！！！！！！！！！！！！！！！！！！！！！！
      var icons = new BMap.IconSequence(sy, '10%', '10%',false);
      
      let num = 0;
      for(let i = 0; i < pois.length; i++){
        if(pois[0].lat == pois[i].lat && pois[0].lng == pois[i].lng) num++
      } //此处FOR循环，本人觉得必须要，百度地图路线不允许所有坐标都一样
      if(num!=pois.length){
        var polyline = new BMap.Polyline(pois, {
          enableEditing: false, // 是否启用线编辑，默认为false
          enableClicking: false, // 是否响应点击事件，默认为true
          icons: [icons],
          strokeWeight: 8, // 折线的宽度，以像素为单位
          strokeOpacity: 1, // 折线的透明度，取值范围0 - 1
          strokeColor: '#4C7FED' // 折线颜色
        })
        map.addOverlay(polyline)
      }

	//下方为打点代码
      var nowIcon = new BMap.Icon(
        require("../../../assets/image/轨迹2.png"),
        new BMap.Size(47, 47),
        {
          anchor: new BMap.Size(22, 40),
          imageOffset: new BMap.Size(0, 0)
        }
      );//打点图标样式
      for (let i = 0; i < pois.length; i++) {  //本人序号为1.2.3.4.....，根据需求更改
          var label = new BMap.Label(i+1, {offset:new BMap.Size(-3,-5)})
          label.setStyle({
            background:'url()',
            color:'#fff',
            border:'none',
            fontSize:'24px',
            textAlign:'center',
            width:'50px',
            height:'50px',
            lineHeight:'50px',
          })
          var nowMarker = new BMap.Marker(pois[i], {
            icon: nowIcon,
          });
          nowMarker.setLabel(label)  //将序号放入标记中
          map.addOverlay(nowMarker);
          nowMarker.setZIndex(9999) //在路线之上 覆盖路线
          
          //下方的Name为所需展示名字，可以是个变量，根据需求展示
          nowMarker.addEventListener('mouseover', function(e) {
            let opts={}
            var infoWindow = new BMap.InfoWindow(`${Name}`, opts) // 创建信息窗口对象
            map.openInfoWindow(infoWindow,pois[i])   
          })
          nowMarker.addEventListener('mouseout', function(e) {
           map.closeInfoWindow();
          })
        } 
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

5.调用

this.guiji() //在合适地方调用
1

6.效果图