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

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

一、准备工作

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

1. 注册百度地图开放平台账号：

   • 访问百度地图开放平台官网 (https://lbsyun.baidu.com/)，注册并登录账号。
   • 创建一个新的应用，并获取API Key。API Key是调用百度地图API所必需的密钥。

2. 创建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="tex