Vue项目引用百度地图并设置鼠标滑过时显示数据_vue中百度地图hover显示详情

公司要求在云平台上添加一个页面，调用百度地图，在上面标记相关地点，鼠标滑过是显示该地点的数据，点击标记跳转到详细数据浏览页面。一边做一边百度终于实现了(#^.#)。

一、vue中引入百度地图接口

1.下载百度地图插件

npm install vue-baidu-map --save

2.在index.html中引入

 <script type="text/javascript"
        src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
1
2

秘钥自己申请或者百度一个都可

二、使用百度地图

1.创建一个div来放百度地图，一定要给div设置宽度和高度，才能显示出来。

 <div class="baidumap" id="allmap"></div>
1

2.定义baiduMap()方法创建地图实例，在mounted周期中调用。list是存在本地的数据，获取数据的方法在created周期中被调用。list中的数据包括id、name、longitude和lantitude，如果不需要从数据库中调用，可以在data中自己定义一个数组来存放这些数据。infoMessage为提示框中显示的消息，可以根据自己的需要进行修改。

mounted() {
    this.baiduMap();
  },
   baiduMap() {
      var map = new BMap.Map("allmap"); // 创建地图实例
      for (var i = 0; i < this.list.length; i++) {
        var point = new BMap.Point(
          this.list[i].longitude,
          this.list[i].latitude
        );
        var infoMessage =this.list[i].name；
        //如果要显示其他数据，加到infoMessage中
         infoMessage += "<br><br><div class='nodate'>无数据！</div>";
        //调用创建marker标记的方法，
        var marker = this.createMarker(
          point,
          infoMessage,
          this.list[i].number,
        );
        map.addOverlay(marker); //添加marker
        var fNameLabel = this.setLabelStyle(this.list[i].name);
        marker.setLabel(fNameLabel); // 添加百度label*/
      }
      var center = new BMap.Point(118.546015, 36.735546); //设置中心点坐标
      map.centerAndZoom(center, 8); //设置中心点和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.OverviewMapControl());
      map.addControl(new BMap.MapTypeControl());
    },
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

3.创建marker标记和信息提示框的方法

//创建maeker和infowindow
    //传入的参数为：坐标，弹框中要显示的信息，厂区号
    createMarker(point, iw, paramNumber) {
      var markerx = new BMap.Marker(point);
      //鼠标停留发生的事件
      markerx.addEventListener("mouseover", function(e) {
        this.openInfoWindow(new BMap.InfoWindow(iw));
      });
      //鼠标划出发生的事件
      markerx.addEventListener("mouseout", function(e) {
        this.closeInfoWindow(new BMap.InfoWindow(iw));
      });
      //点击标记发生的事件
      var that = this;
      markerx.addEventListener("click", function(e) {
        that.$router.push({
          path: "点击之后要跳转的路径",
          query: {
            paramnumber: paramNumber
          }//给跳转页面传递的参数
        });
      });
      return markerx;
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三、总代码

<template>
  <div class="app-container">
    <div class="baidumap" id="allmap"></div>
  </div>
</template>

<script>
export default {
  name: "pm-distribution",
  components: {},
  data() {
    return {
      tokenPiece: this.$store.state.user.token.split(".")[1].slice(-34, -25),
      visible: null,
      paramNumber: null, //页面跳转传递的厂区号
      list: null,
      flag: true,
      listLoading:true,
      }
  },
  created() {
    this.fetchData();
  },
  mounted() {
    this.baiduMap();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      this.list = this.$store.state.user.factoryInfo;
      this.listLoading = false;
      for (var i = 0; i < this.list.length; i++) {
        this.factory = this.list[i].number;
       /*  this.queryGroup(); */
      }
    },
     baiduMap() {
      var map = new BMap.Map("allmap"); // 创建地图实例
      for (var i = 0; i < this.list.length; i++) {
        var point = new BMap.Point(
          this.list[i].longitude,
          this.list[i].latitude
        );
        var infoMessage =this.list[i].name;
        //如果要显示其他数据，加到infoMessage中
         infoMessage += "<br><br><div class='nodate'>无数据！</div><br><span class='reminder'>点击标记获取更多信息</span>";
        //调用创建marker标记的方法，
        var marker = this.createMarker(
          point,
          infoMessage,
          this.list[i].number,
        );
        map.addOverlay(marker); //添加marker
      }
      var center = new BMap.Point(118.546015, 36.735546); //设置中心点坐标
      map.centerAndZoom(center, 8); //设置中心点和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.OverviewMapControl());
      map.addControl(new BMap.MapTypeControl());
    },
  //创建maeker和infowindow
    //传入的参数为：坐标，弹框中要显示的信息，厂区号
    createMarker(point, iw, paramNumber) {
      var markerx = new BMap.Marker(point);
      //鼠标停留发生的事件
      markerx.addEventListener("mouseover", function(e) {
        this.openInfoWindow(new BMap.InfoWindow(iw));
      });
      //鼠标划出发生的事件
      markerx.addEventListener("mouseout", function(e) {
        this.closeInfoWindow(new BMap.InfoWindow(iw));
      });
      //点击标记发生的事件
      var that = this;
      markerx.addEventListener("click", function(e) {
        that.$router.push({
          path: "点击之后要跳转的路径",
          query: {
            paramnumber: paramNumber
          }//给跳转页面传递的参数
        });
      });
      return markerx;
    },
  }
};
</script>
<style >
.baidumap {
  width: 100%;
  height: 650px;
}
/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
  display: none !important;
}
.baidumap > .anchorBL {
  display: none !important;
}
/* 弹出框中标题样式 */
.title {
  color: darkgreen;
  text-align: center;
  height: 10px;
}
/* 弹出框中提示“无数据”的样式 */
.nodate {
  color: dimgrey;
  text-align: center;
}
/* 弹出框底部的点击提示样式 */
.reminder {
  font-size: 12px;
  color: darkcyan;
  margin-left: 100px;
}
</style>
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

四、效果图