vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具

下面将详细说明如何在Vue项目中引入百度地图BMapGL鼠标绘制和BMap辅助工具。

步骤一：安装依赖

首先，需要在项目中安装百度地图JavaScript API，具体代码如下所示：

npm install bmapgl --save

步骤二：引入百度地图相关的JS和CSS文件

在Vue项目中，可以在index.html文件中引入：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-bmap-demo</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=Your-ak"></script>
    <link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
    <script src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <script src="https://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

其中，Your-ak需要替换为自己申请的百度地图API Key。

步骤三：编写代码

在Vue组件中，可以使用BMapGL来创建地图，同时也可以添加BMapGL的扩展功能。

例如，为地图添加鼠标绘制：

<template>
  <div id="map" style="height: 100vh;"></div>
</template>

<script>
import BMapGL from "BMapGL";
import "BMapGL/lib/DrawingManager";
import "BMapGL/lib/SearchInfoWindow";

export default {
  name: "bmap",
  data() {
    return {
      map: null,
      drawingManager: null,
      searchInfoWindow: null,
    };
  },
  mounted() {
    this.initMap();
    this.initDrawingManager();
  },
  methods: {
    initMap() {
      this.map = new BMapGL.Map("map"); // 创建地图对象
      this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图，设置中心点和缩放级别
    },
    initDrawingManager() {
      const options = {
        enableDrawingTool: true, // 是否启用绘制工具
        drawingToolOptions: {
          anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置
          offset: new BMapGL.Size(5, 5), // 偏移量
          drawingModes: [
            BMAP_DRAWING_MARKER, // 标注
            BMAP_DRAWING_CIRCLE, // 圆形
            BMAP_DRAWING_POLYLINE, // 折线
            BMAP_DRAWING_POLYGON, // 多边形
            BMAP_DRAWING_RECTANGLE, // 矩形
          ],
        },
        markerOptions: {
          icon: new BMapGL.Icon(
            "http://api.map.baidu.com/img/markers.png",
            new BMapGL.Size(23, 25),
            {
              offset: new BMapGL.Size(10, 25),
              imageOffset: new BMapGL.Size(0, 0 - 10 * 25),
            }
          ),
        },
        circleOptions: {
          strokeWeight: 2,
          fillColor: "#fff",
          strokeColor: "#000",
          fillOpacity: 0.5,
          strokeOpacity: 0.5,
        },
        polylineOptions: {
          strokeWeight: 2,
          strokeColor: "#000",
          strokeOpacity: 0.5,
        },
        polygonOptions: {
          strokeWeight: 2,
          strokeColor: "#000",
          strokeOpacity: 0.5,
          fillColor: "#fff",
          fillOpacity: 0.5,
        },
        rectangleOptions: {
          strokeWeight: 2,
          strokeColor: "#000",
          strokeOpacity: 0.5,
          fillColor: "#fff",
          fillOpacity: 0.5,
        },
      };
      // 创建鼠标绘制管理器实例
      this.drawingManager = new BMapGL.DrawingManager(this.map, options);
      // 添加鼠标绘制工具监听事件，用于获取绘制结果
      this.drawingManager.addEventListener("overlaycomplete", this.onDrawOverlayComplete);
    },
    onDrawOverlayComplete(e) {
      console.log(`绘制模式：${e.drawingMode}`); // 打印绘制模式，例如marker、circle等
      console.log(`绘制结果：${JSON.stringify(e.overlay.getPath())}`); // 打印绘制的结果，例如折线或多边形的点集
    },
  },
};
</script>

在Vue组件中，还可以添加BMapGL的搜索框功能：

<template>
  <div id="map" style="height: 100vh;"></div>
</template>

<script>
import BMapGL from "BMapGL";
import "BMapGL/lib/DrawingManager";
import "BMapGL/lib/SearchInfoWindow";

export default {
  name: "bmap",
  data() {
    return {
      map: null,
      searchInfoWindow: null,
    };
  },
  mounted() {
    this.initMap();
    this.initSearchInfoWindow();
  },
  methods: {
    initMap() {
      this.map = new BMapGL.Map("map");
      this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
      this.map.enableScrollWheelZoom(true);
    },
    initSearchInfoWindow() {
      // 创建搜索信息窗口实例
      this.searchInfoWindow = new BMapGL.SearchInfoWindow(this.map, "", {
        title: "搜索结果", // 窗口标题
        enableAutoPan: true, // 是否可以自动调整窗口位置
        searchTypes: [
          BMAPLIB_TAB_SEARCH, // 关键字搜索
          BMAPLIB_TAB_TO_HERE, // 到这里去
          BMAPLIB_TAB_FROM_HERE, // 从这里出发
        ],
      });
      // 添加地图上的标注，并为标注添加click事件，用于显示搜索信息窗口
      const point = new BMapGL.Point(116.404, 39.915);
      const marker = new BMapGL.Marker(point);
      this.map.addOverlay(marker);
      marker.addEventListener("click", () => {
        this.searchInfoWindow.open(point); // 显示搜索信息窗口
      });
    },
  },
};
</script>

步骤四：运行项目

最后，运行Vue项目即可看到地图及其扩展功能的效果。

以上是关于如何在Vue项目中引入百度地图BMapGL鼠标绘制和BMap辅助工具的详细攻略，希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具 - Python技术站

vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具

步骤一：安装依赖

步骤二：引入百度地图相关的JS和CSS文件

步骤三：编写代码

步骤四：运行项目

相关文章