vue3+ts+百度地图3.0

1
<template>
2
  <div id="map_canvas" style="width:500px;height:500px"></div>
3
  <button id="run" @click="run">开始</button>
4
  <button id="stop" @click="stop">停止</button>
5
  <button id="pause" @click="pause">暂停</button>
6
  <button id="hide" @click="hide">隐藏信息窗口</button>
7
  <button id="show" @click="show">展示信息窗口</button>
8
</template>
9
<script lang="ts" setup>
10
  import { ref, onMounted } from "vue";
11
  import car from "@/assets/car.png";
12
  const lushu = ref(null) as any;
13
  onMounted(() => {
14
    initMap();
15
  });
16
  function initMap() {
17
    const map = new BMap.Map("map_canvas");
18
    map.enableScrollWheelZoom(true);
19
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
20
    var arrPois = [] as any;
21
    console.log(arrPois);
22
    arrPois = [
23
      new BMap.Point(112.14267243359373, 45.081711957142886),
24
      new BMap.Point(121.10751618359373, 24.277571914059855),
25
      new BMap.Point(116.404844, 39.911836),
26
      new BMap.Point(116.308102, 40.056057),
27
    ];
28
    console.log(arrPois);
29
    map.addOverlay(new BMap.Polyline(arrPois, { strokeColor: "#111" }));
30
    map.setViewport(arrPois);
31
    const customContent = [] as any;
32
    arrPois.forEach((element: any, index: any) => {
33
      customContent.push({
34
        html: `<div> <div class="poi-name">${index}</div> <div class="poi-address">`,
35
      });
36
    });
37
    lushu.value = new BMapLib.LuShu(map, arrPois, {
38
      defaultContent: "", //"从天安门到百度大厦"
39
      customContent: customContent, //LuShu.js自定义的属于，为了轨迹播放时显示不同的信息
40
      autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
41
      icon: new BMap.Icon(car, new BMap.Size(52, 26), {
42
        anchor: new BMap.Size(27, 13),
43
      }),
44
      speed: 450000, //速度，单位米每秒
45
      enableRotation: true, //是否设置marker随着道路的走向进行旋转
46
      //landmarkPois:此参数是路书移动的时候碰到这个点会触发pauseTime停留中设置的时间，单位为秒，经纬度误差超过十米不会停止
47
      landmarkPois: [
48
        { lng: 116.314782, lat: 39.913508, html: "加油站", pauseTime: 2 },
49
        {
50
          lng: 121.10751618359373,
51
          lat: 24.277571914059855,
52
          html: '高速公路收费<div><img src="//map.baidu.com/img/logo-map.gif"/></div>',
53
          pauseTime: 3,
54
        },
55
        { lng: 116.381476, lat: 39.974073, html: "肯德基早餐", pauseTime: 2 },
56
      ],
57
    });
58
  }
59
  function run() {
60
    lushu.value.start();
61
  }
62
  function stop() {
63
    lushu.value.stop();
64
  }
65
  function pause() {
66
    lushu.value.pause();
67
  }
68
  function hide() {
69
    lushu.value.hideInfoWindow();
70
  }
71
  function show() {
72
    lushu.value.showInfoWindow();
73
  }
74
</script>

1
<template>
2
  <div id="container"></div>
3
  <a-button type="primary" @click="click1('marker1')">点位1</a-button>
4
  <a-button type="primary" @click="click1('marker2')" style="margin-left: 20px;"
5
    >点位2</a-button
6
  >
7
</template>
8
<script lang="ts">
9
  import { defineComponent } from "vue";
10
  import BMap from "BMap";
11
  import createHTMLMarker from "../ts/createHTMLMarker";
12
  export default defineComponent({
13
    data() {
14
      return {
15
        ak: "你的AK",
16
        map: null as any,
17
      };
18
    },
19
    mounted() {
20
      this.initMap();
21
    },
22
    methods: {
23
      initMap() {
24
        var that = this;
25
        this.map = new BMap.Map("container");
26
        var point = new BMap.Point(116.404, 39.915);
27
        this.map.centerAndZoom(point, 5);
28
        this.map.enableScrollWheelZoom(true);
29
        const baiduPoints = [
30
          {
31
            id: "marker1",
32
            point: [110.404, 39.915],
33
          },
34
          {
35
            id: "marker2",
36
            point: [117.404, 39.915],
37
          },
38
        ];
39
        baiduPoints.forEach((baiduPoint) => {
40
          var point1 = new BMap.Point(baiduPoint.point[0], baiduPoint.point[1]);
41
          var marker = new BMap.Marker(point1);
42
          var opts = {
43
            width: 200, // 信息窗口宽度
44
            height: 100, // 信息窗口高度
45
            title: "故宫博物院", // 信息窗口标题
46
            message: "这里是故宫",
47
          };
48
          var infoWindow = new BMap.InfoWindow(
49
            "地址：北京市东城区王府井大街88号乐天银泰百货八层",
50
            opts
51
          ); // 创建信息窗口对象
52
          marker.addEventListener("click", function () {
53
            that.map.openInfoWindow(infoWindow, point1); //开启信息窗口
54
          });
55
          marker.clickEvent = function () {
56
            that.map.openInfoWindow(infoWindow, point1); //开启信息窗口
57
          };
58
          //方式一：给marker一个id
59
          marker.id = baiduPoint.id;
60
          that.map.addOverlay(marker);
61
          //方式二：给marker的dom赋一个id
62
          marker._div.id = baiduPoint.id;
63
          // console.log(marker);
64
        });
65
      },
66
      click1(a: any) {
67
        //方式一
68
        this.map.getOverlays().forEach((overlay: any) => {
69
          if (overlay.id === a) {
70
            // overlay.ca.click()
71
            overlay.clickEvent();
72
            this.map.centerAndZoom(overlay.point, 10);
73
          }
74
          // console.log(overlay.id);
75
        });
76
        //方式二
77
        const element = document.getElementById(id);
78
        if (element) {
79
          element.click();
80
          bool = true;
81
        }
82
      },
83
    },
84
  });
85
</script>
86
<style lang="scss">
87
  #container {
88
    width: 100%;
89
    height: 800px;
90
  }
91
</style>