vue中使用高德地图的方法

示例

前提条件

• 已安装vue-cli
• 已注册高德地图开发者账号
• 已申请并获取到高德地图的API Key

步骤

1.安装高德地图JavaScript API

在你的项目中安装高德地图JavaScript API。在命令行中输入：

npm install @amap/amap-jsapi-loader --save

2.创建地图组件

在src/components目录下创建Map.vue文件，并在其中添加以下代码：

此组件接受三个参数：

• apiKey（必需）：高德地图的API Key
• center（可选）：地图中心点的经纬度坐标。默认值为[116.397428, 39.90923]（北京市中心）
• zoom（可选）：地图的缩放级别。默认值为13

3.在App.vue中使用地图组件

在App.vue文件中引入Map组件，并将apiKey传递给它：

替换"your api key"成你自己申请的API Key。

4.运行项目

在命令行中输入以下命令以运行项目：

npm run serve

现在你应该能够在浏览器中看到一个显示高德地图的页面。

结束语

在这个示例中，我们演示了如何使用vue-cli和高德地图JavaScript API创建一个简单的地图应用。你可以在此基础上添加更多的功能和交互。