实战使用Vue 2接入百度地图API

James吖

于 2024-08-23 20:22:08 发布

阅读量257

点赞数 9

文章标签： arcgis vue.js vue java javascript 前端大数据

本文链接：https://blog.csdn.net/qq_46292480/article/details/141474070

版权

在现代Web应用开发中，集成地图服务已成为许多项目的标准功能，尤其是在涉及地理位置的应用中。百度地图API提供了丰富的功能和良好的开发者支持，使得集成地图服务变得更加简单。本文将详细讲解如何在Vue 2项目中接入百度地图API，实现基本的地图显示和位置标记功能。

一、准备工作

在开始之前，请确保完成以下准备工作：

注册百度地图开放平台账号：
- 访问百度地图开放平台官网 (https://lbsyun.baidu.com/)，注册并登录账号。
- 创建一个新的应用，并获取API Key。API Key是调用百度地图API所必需的密钥。
创建Vue 2项目：
- 如果你还没有一个Vue 2项目，可以通过Vue CLI快速生成一个。
```
vue create my-project
cd my-project
npm install
```
确保选择Vue 2版本进行创建。

二、引入百度地图SDK

百度地图提供了两种方式来引入SDK：通过CDN直接引入，或者通过npm安装。

方法1: CDN方式

在public/index.html文件中添加如下代码：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的APIKey"></script>

方法2: npm方式

npm install baidu-map

然后在需要使用的地方导入：

import BMap from 'baidu-map';

三、实现基本地图功能

接下来，我们将在Vue组件中使用百度地图API来实现基本的地图显示功能。

Vue组件示例

<template>
  <div id="map" class="map"></div>
</template>

<script>
export default {
  name: 'BaiduMapComponent',
  data() {
    return {
      map: null,
      point: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new BMap.Map('map');
      
      // 创建点坐标
      this.point = new BMap.Point(116.404, 39.915);

      // 初始化地图，设置中心点坐标和地图级别
      this.map.centerAndZoom(this.point, 15);

      // 添加地图类型控件
      this.map.addControl(new BMap.MapTypeControl());

      // 设置地图显示的类型为普通道路图
      this.map.setMapType(BMAP_NORMAL_MAP);

      // 开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true);
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
}
</style>

在这个组件中，我们创建了一个地图实例，并设置了初始的中心点和缩放级别。同时，添加了地图类型控件，并开启了鼠标滚轮缩放功能。

四、添加标记点

接下来，我们将在地图上添加一个标记点。

更新Vue组件

<template>
  <div id="map" class="map"></div>
</template>

<script>
export default {
  name: 'BaiduMapComponent',
  data() {
    return {
      map: null,
      point: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new BMap.Map('map');
      
      // 创建点坐标
      this.point = new BMap.Point(116.404, 39.915);

      // 初始化地图，设置中心点坐标和地图级别
      this.map.centerAndZoom(this.point, 15);

      // 添加地图类型控件
      this.map.addControl(new BMap.MapTypeControl());

      // 设置地图显示的类型为普通道路图
      this.map.setMapType(BMAP_NORMAL_MAP);

      // 开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true);

      // 创建标注
      let marker = new BMap.Marker(this.point);  // 创建标注
      this.map.addOverlay(marker);               // 将标注添加到地图中
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
}
</style>

在这个例子中，我们创建了一个标注点，并将其添加到了地图上。

五、动态更新地图

为了让地图更具交互性，我们可以根据用户的输入动态更新地图的位置和标记点。假设我们有一个输入框，用户可以输入一个地点名称，然后我们使用百度地图API的地理编码服务来获取该地点的坐标，并更新地图的中心点和标记点。

更新Vue组件

<template>
  <div>
    <input v-model="searchLocation" @keyup.enter="updateMap">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
export default {
  name: 'BaiduMapComponent',
  data() {
    return {
      map: null,
      point: null,
      searchLocation: ''
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new BMap.Map('map');

      // 创建点坐标
      this.point = new BMap.Point(116.404, 39.915);

      // 初始化地图，设置中心点坐标和地图级别
      this.map.centerAndZoom(this.point, 15);

      // 添加地图类型控件
      this.map.addControl(new BMap.MapTypeControl());

      // 设置地图显示的类型为普通道路图
      this.map.setMapType(BMAP_NORMAL_MAP);

      // 开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true);

      // 创建标注
      this.marker = new BMap.Marker(this.point);
      this.map.addOverlay(this.marker);
    },
    updateMap() {
      if (this.searchLocation) {
        let geoc = new BMap.Geocoder();
        geoc.getPoint(this.searchLocation, (point) => {
          if (point) {
            this.map.centerAndZoom(point, 15);
            this.marker.setPosition(point);
          } else {
            alert('您输入的地址没有找到！');
          }
        }, "zh-CN");
      }
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
}
</style>

在这个示例中，我们增加了一个输入框，并监听回车键事件来触发地图更新。当用户输入一个地点名称并按下回车键时，地图将重新定位到该地点，并更新标记点的位置。

六、测试与调试

运行你的Vue应用并检查地图是否正确加载，以及输入地点名称后地图是否能够正确更新。

npm run serve

七、结语

通过本文的介绍，你已经掌握了如何在Vue 2项目中接入百度地图API，实现基本的地图显示、标记点添加以及动态更新等功能。百度地图API提供了更多的功能和服务，如路径规划、交通状况查询等，可以根据实际需求进一步探索和使用。希望这篇文章能够帮助你在项目中更好地利用地图服务，提升应用的功能性和用户体验。

James吖

关注

9
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
实战使用Vue 2接入百度地图API

通过本文的介绍，你已经掌握了如何在Vue 2项目中接入百度地图API，实现基本的地图显示、标记点添加以及动态更新等功能。百度地图API提供了更多的功能和服务，如路径规划、交通状况查询等，可以根据实际需求进一步探索和使用。希望这篇文章能够帮助你在项目中更好地利用地图服务，提升应用的功能性和用户体验。
复制链接

扫一扫