生成一个vue,使用百度地图API,通过创建的经纬度,来在前端地图显示指定的点位
时间: 2023-02-05 17:38:24 浏览: 191
详解vue项目中调用百度地图API使用方法
生成 Vue 项目的方法有很多种,这里给出一种使用 vue-cli 的方法。
首先,确保你已经安装了 Node.js 和 vue-cli。然后,在命令行中执行以下命令来创建一个 Vue 项目:
```
vue create my-project
```
在创建项目时,会提示你选择配置方案。选择 "Manually select features",然后选择 "Babel" 和 "Router" 作为需要安装的依赖。
然后,进入你创建的项目目录,执行以下命令安装百度地图 SDK:
```
npm install --save bmap-js-sdk
```
接下来,在 Vue 组件中引入百度地图 SDK:
```
import BMap from 'bmap-js-sdk'
```
然后,在 mounted 钩子函数中初始化地图:
```
mounted () {
// 初始化地图
const map = new BMap.Map(this.$refs.map)
// 设置中心点坐标
const point = new BMap.Point(116.404, 39.915)
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15)
}
```
最后,在组件模板中加入一个 div,作为地图容器:
```
<template>
<div ref="map"></div>
</template>
```
这样就可以在前端地图中显示出指定的点位了。
注意:使用百度地图 API 需要先申请密钥,并在初始化地图时使用密钥。可以在百度地图
阅读全文