百度地图自定义叠加层

LBS 云服务提供海量位置数据的实时存储功能，JavaScript API 支持将用户上传到 LBS 云里的位置数据实时渲染成图层

1、安装 vue-baidu-map

1
npm install vue-baidu-map

2、具体业务代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<baidu-map
  id="container"
  :scroll-wheel-zoom="true"
  :zoom="zoom"
  center="上海"
  :ak="selfKey"
  inertial-dragging
  @ready="mapReady"
>
</baidu-map>
<div class="menu-search">
  <el-input placeholder="请输入站点名称" v-model="site_name" clearable>
    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
  </el-input>
</div>
点我展开js代码 
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
<script>
// 在组件中引入vue-baidu-map
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default{
    components:{BaiduMap},
    data(){
        return{
            site_name:'',
            center:{lng:121.532325,lat:31.232742},
            selfKey:'QloR7bQpWed3VDLbtcxi2NmgUcvXxcbx',
            point:'',
            zoom:15
        }
    },
    mounted(){
        this.mapReady()
    },
    methods:{
        mapReady(){
            var map = new BMap.Map("container")
            map.centerAndZoom(new BMap.Point(this.center.lng,ths.center.lat),10)
            map.enableScrollWheelZoom()
                  /**
       *params   q:检索关键字
       *params   tags：空格分割的多字符
       *params   filter:过滤条件
       */
            var customLayer;
            customLayer = new BMap.CustomLayer({
                geotableId: 183323,
                q: "",
                tags: "",
                filter: "",
            });
            map.addTileLayer(customLayer);
            // 热点图层
            customLayer.addEventListener("onhotspotclick", callback);
            function callback(e) {
                var customPoi = e.customPoi;
                var content =
                    '<p style="margin:0;line-height:40px;">地址：' +
                     customPoi.address +
                    "<br/>" +
                    '<a style="color:#3398DB" href="./monitor/index">查看橇装站点实时监控画面</a>' +
                    "</p>";
                var BMapLib = window.BMapLib;
                var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
                        title: customPoi.title,
                        width: 200,
                        height: 100,
                        panel: "panel",
                        enableAutoPan: true,
                        enableSendToPhone: false,
                        searchTypes: [],
                });
                var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
                searchInfoWindow.open(point);
            }
        },
          search() {
                var map = new BMap.Map("container");
                map.centerAndZoom(new BMap.Point(this.center.lng, this.center.lat), 10);
                map.enableScrollWheelZoom();
                var customLayer;
                customLayer = new BMap.CustomLayer({
                    geotableId: 183323,
                    q: this.site_name || "新西北物流园",
                    tags: "",
                    filter: "",
                });
                // 添加自定义图层
                map.addTileLayer(customLayer);

                // var mapDom = document.getElementById("container")
                // mapDom.addEventListener("click", function () {
                //   window.location.href = "./monitor/index";
                // });
                // 热点图层
                customLayer.addEventListener("onhotspotclick", callback);
                function callback(e) {
                    var customPoi = e.customPoi;
                    var content =
                    '<p style="margin:0;line-height:40px;">地址：' +
                    customPoi.address +
                    "<br/>" +
                    '<a style="color:#3398DB" href="./monitor/index">查看橇装站点实时监控画面</a>' +
                    "</p>";
                    var BMapLib = window.BMapLib;
                    // console.log("BMapLib", BMapLib);
                    var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
                    title: customPoi.title,
                    width: 200,
                    height: 100,
                    panel: "panel",
                    enableAutoPan: true,
                    enableSendToPhone: false,
                    searchTypes: [],
                    });
                    var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
                    searchInfoWindow.open(point);
                }
    },
    }
}
</script>

</details>