vue3中使用百度地图的简单步骤
作者：多喝开水少熬夜
最近项目要用到百度地图api,好久没用到地图,就百度了一番,下面这篇文章主要给大家介绍了关于vue3中使用百度地图的简单步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
最近一个项目要用到地图，因为微信小程序用的也是百度地图，所以想着网页端也用百度地图，在网上查了很多方法，包括引入百度地图第三方库，还是有问题，发现最简单的方法就是在index.html中引入script，然后直接在相关页面肝就完事。
一、申请ak
在百度开发者平台上面申请，其他博客都可以看到相关申请过程，这里就不多述。
因为还处于开发调试状态，所以白名单写的是**。
二、使用步骤
1.在public下index.html引入相关script
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=your_ak"
></script>2.在相关页面编写代码
代码如下（示例）：
<template>
<div class="bmap" id="container"></div>
<div></div>
</template>
<script>
import { useStore } from 'vuex'
// import { ref } from 'vue'
export default {
name: 'BmapDemo',
mounted() {
const store = useStore()
var map = new window.BMapGL.Map('container')
var point = new window.BMapGL.Point(
store.state.record.longitude,//这里本人项目中可以有相关store数据，建议从自己项目出发进行修改
store.state.record.latitude
)
map.centerAndZoom(point, 18)
map.enableScrollWheelZoom(true)
var label = new window.BMapGL.Label('疲劳地点', {
position: point, // 设置标注的地理位置
offset: new window.BMapGL.Size(0, 0) // 设置标注的偏移量
})
// 添加标签
map.addOverlay(label) // 将标注添加到地图中
label.setStyle({
fontSize: '32px',
color: 'red'
})
var marker = new window.BMapGL.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
var scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件
map.addControl(scaleCtrl)
var zoomCtrl = new window.BMapGL.ZoomControl() // 添加缩放控件
map.addControl(zoomCtrl)
var cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件
map.addControl(cityCtrl)
},
setup() {
// const store = useStore()
// let latitude = ref('')
// let longitude = ref('')
// console.log(store.state.record.latitude)
// latitude.value = store.state.record.latitude
// longitude.value = store.state.record.longitude
// return {
// latitude,
// longitude
// }
}
}
</script>
<style scoped>
.bmap {
width: 800px;
height: 600px;
border: 1px solid #000;
}
</style>显示结果：
总结
感觉这种方法是最快速的，关键点有一个就是new window.BMapGL.Map,前面要加window。然后其他用法都可以在官方文档中查到。
链接：
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey
到此这篇关于vue3中使用百度地图的文章就介绍到这了,更多相关vue3使用百度地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！