帮我用vue2写一个百度地图的组件
时间: 2023-11-27 17:50:24 浏览: 36
好的,首先你需要在你的项目中引入百度地图的 API,在 `index.html` 文件中添加以下代码:
```html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
```
其中,`ak` 是你的百度地图开发者密钥,如果没有可以在百度地图开放平台申请。
然后我们可以创建一个名为 `BaiduMap.vue` 的组件来展示地图。
```vue
<template>
<div id="map"></div>
</template>
<script>
export default {
name: "BaiduMap",
mounted() {
this.initMap();
},
methods: {
initMap() {
// 创建地图实例
const map = new BMap.Map("map");
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 添加控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
},
},
};
</script>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
```
在 `mounted` 钩子中,我们调用 `initMap` 方法来初始化地图。在 `initMap` 方法中,我们创建了一个地图实例,设置了中心点坐标和地图级别,并添加了一些常用的控件。
最后在 `style` 中设置地图容器的宽度和高度即可。
使用该组件时,只需在父组件中引入并使用即可:
```vue
<template>
<div>
<BaiduMap />
</div>
</template>
<script>
import BaiduMap from "@/components/BaiduMap.vue";
export default {
name: "App",
components: {
BaiduMap,
},
};
</script>
```
注意,需要在 `main.js` 中引入 `BMap` 对象:
```js
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
// 引入百度地图
import "@/assets/js/BMap.js";
new Vue({
render: (h) => h(App),
}).$mount("#app");
```