vue3使用百度地图简单步骤

一、申请AK

百度地图开放平台 | 百度地图API SDK | 地图开发

在百度地图开放平台申请AK,申请成功如下图所示:

二、实用步骤

1.安装vue-baidu-map-3x:

npm install vue-baidu-map-3x --save

2.在main.js中进行全局配置

 注意事项:

1.BaiduMap 组件容器本身是一个空的块级元素,如果容器不定义高度,百度地图将渲染在一个高度为 0 不可见的容器内;

2.没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外,因为百度地图会根据地名自动调整 zoom 的值;         

3.由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。

3.在页面中使用

效果展示:

Tips:具体控件实用规则可参考该链接Vue Baidu Map

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是使用 Vue3 和百度地图地理编码的详细步骤: 1. 安装百度地图 JavaScript API 在 Vue 3 项目的 `index.html` 文件中添加以下代码: ```html <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=YOUR_APP_KEY"></script> ``` 其中,`YOUR_APP_KEY` 是你的百度地图应用程序密钥。 2. 在 Vue 3 中创建地图组件 在 Vue 3 中,你可以使用 Composition API 来创建地图组件。以下是一个简单的示例: ```html <template> <div ref="map" style="width: 100%; height: 300px;"></div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const map = ref(null); onMounted(() => { map.value = new BMap.Map(map.value); }); return { map, }; }, }; </script> ``` 在这个示例中,我们使用了 `ref` 来创建了一个对 `div` 元素的引用,在 `onMounted` 钩子中创建了一个百度地图实例,并将其赋值给 `map` 变量。 3. 添加地理编码服务 要使用百度地图地理编码服务,你需要在 `onMounted` 钩子中添加以下代码: ```javascript const geoc = new BMap.Geocoder(); map.value.addEventListener('click', (e) => { geoc.getLocation(e.point, (rs) => { const addComp = rs.addressComponents; console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); }); }); ``` 在这个示例中,我们创建了一个 `BMap.Geocoder` 实例,并在地图上添加了一个 `click` 事件监听器。当用户单击地图时,我们将获取单击点的地理位置信息,并将其打印到控制台中。 4. 运行项目 最后,你可以使用 `npm run serve` 命令来运行你的 Vue 3 项目,并在浏览器中访问你的应用程序。当你单击地图时,你将在控制台中看到地理位置信息。 以上就是使用 Vue3 和百度地图地理编码的详细步骤

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值