vue使用百度地图显示指定位置的点
时间: 2024-06-06 07:01:14 浏览: 162
要在Vue中使用百度地图显示指定位置的点,你需要:
1. 在百度地图开放平台上注册并创建一个应用,获取到AK(API Key)。
2. 在Vue项目中引入百度地图JS API。
3. 在Vue组件中引入百度地图,并初始化地图。可以使用百度地图提供的Map类来创建地图实例。
4. 在地图上添加指定位置的点。可以使用百度地图提供的Marker类来创建标注实例,并指定标注的位置。
下面是一个简单的示例代码:
```html
<template>
<div id="map" style="height: 500px;"></div>
</template>
<script>
export default {
mounted() {
// 引入百度地图JS API
const AK = '你的AK';
const script = document.createElement('script');
script.src = `https://api.map.baidu.com/api?v=3.0&ak=${AK}&callback=initMap`;
script.async = true;
script.defer = true;
document.body.appendChild(script);
// 初始化地图
window.initMap = () => {
const map = new BMap.Map('map');
const point = new BMap.Point(116.404, 39.915); // 指定位置的经纬度
map.centerAndZoom(point, 15); // 设置地图中心点和缩放级别
// 添加标注
const marker = new BMap.Marker(point);
map.addOverlay(marker);
};
},
};
</script>
```
在上面的代码中,我们在mounted钩子函数中引入了百度地图JS API,并且在API加载完成后调用了initMap函数来初始化地图。在initMap函数中,我们创建了一个地图实例和一个标注实例,并将标注添加到地图上。
注意:在使用百度地图JS API时,需要注意跨域问题。可以在百度地图开放平台上设置允许的域名。
阅读全文