vue3 使用百度地图 代码
时间: 2024-05-24 22:06:38 浏览: 96
vue项目中使用百度地图的方法
Vue3是一种流行的JavaScript框架,用于构建用户界面。它提供了一种声明式的方式来构建交互式的Web应用程序。百度地图是一个基于Web的地图服务,提供了地图展示、地点搜索、路线规划等功能。下面是一个使用Vue3和百度地图的代码示例:
首先,你需要在HTML文件中引入Vue和百度地图的JavaScript库:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue3 Baidu Map Example</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_API_KEY"></script>
</head>
<body>
<div id="app">
<div ref="map" style="width: 100%; height: 400px;"></div>
</div>
<script>
const app = Vue.createApp({
mounted() {
// 在组件挂载后初始化地图
const map = new BMap.Map(this.$refs.map);
const point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
}
});
app.mount('#app');
</script>
</body>
</html>
```
在上面的代码中,我们首先引入了Vue和百度地图的JavaScript库。然后,在Vue的`mounted`生命周期钩子中,我们创建了一个地图实例,并将其显示在具有指定宽度和高度的`<div>`元素中。
请注意,你需要将`YOUR_API_KEY`替换为你自己的百度地图API密钥。你可以在百度地图开放平台上注册并获取API密钥。
希望这个示例能帮助到你!如果你有任何其他问题,请随时提问。
阅读全文