vue中使用百度地图(vue使用百度地图三方标准地图清空后卡死)

编辑：rootadmin

vue中使用百度地图 vue中使用百度地图之前写过一篇vue调用百度地图的文章，但是写得不是很清晰，所以重新整理一篇；申请百度地图ak这个我在之前的那篇文章已经讲过，就不再细说，链接如下：

推荐整理分享vue中使用百度地图(vue使用百度地图三方标准地图清空后卡死)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue使用百度地图api打包后报错,vue使用百度地图webgl,vue使用百度地图md5报错,vue使用百度地图api打包后报错,vue使用百度地图api根据地址提供详细坐标,vue使用百度地图api根据地址提供详细坐标,vue使用百度地图webgl,vue使用百度地图显示空白,内容如对您有帮助，希望把文章链接给更多的朋友！

vue调用百度地图

初始化地图引入地图

这里我们之前是直接在html中引用的，现在我们通过异步加载的方式; 先写一个异步加载的方法，参数你可以自己ak是你自己申请的地图ak，你也可以直接写在方法里面，就不用以参数的形式传入；这里需要注意的是：百度地图有两个初始化对象，一个是BMapGL，另一个是BMap 两者区别： 1、BMapGL初始化的地址中需添加&type=webgl，BMap初化地址中则一定不能添加，即： BMapGl：https://api.map.baidu.com/api?v=1.0&type=webgl&callback=initBMap&ak=自己的ak BMap：https://api.map.baidu.com/api?v=2.0&callback=initBMap&ak=自己的ak 2、BMap在使用时，版本需>=2.0，如果使用1.0则会提示版本过低

3、BMapGL比BMap缩放等级更大更多差异可自行了解

export function BMapLoader(ak) { return new Promise((resolve, reject) => { if (window.BMapGL) { resolve(window.BMapGL) } else { const script = document.createElement('script') script.type = 'text/javascript' script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&callback=initBMap&ak=' + ak script.async = true script.onerror = reject document.head.appendChild(script) } window.initBMap = function () { resolve(window.BMapGL) } })}地图展示

新建一个vue页面，代码如下：

<template> <div id="allmap" class="allmap" /></template><script>import { BMapLoader } from '@/utils/mapLoader'export default { name: 'BMap', data() { return { map: null } }, created() { this.initMap() }, destroyed() { this.map.destroy() }, methods: { initMap() { this.$nextTick(() => { BMapLoader('你自己申请的ak').then(BMap => { const map = new BMap.Map('allmap', { enableMapClick: false }) this.map = map map.disableKeyboard() // 禁用键盘操作地图 map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放 // 添加中心点和缩放等级，如果不添加，初始化出来页面为白屏 const point = new BMap.Point(106.78887812364171, 29.666046706760273) map.centerAndZoom(point, 15) }) }) } }}</script><style>.allmap { width: 100%; height: 100%; position: absolute;}</style>添加数据

添加一个marker点

methods: { initMap() { this.$nextTick(() => { BMapLoader('你自己申请的ak').then(BMap => { const map = new BMap.Map('allmap', { enableMapClick: false }) this.map = map map.disableKeyboard() // 禁用键盘操作地图 map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放 const point = new BMap.Point(106.78887812364171, 29.666046706760273) map.centerAndZoom(point, 15) this.addMarker(BMap, map) }) }) }, addMarker(BMap, map) { const point = new BMap.Point(106.78887812364171, 29.666046706760273) map.addOverlay(new BMap.Marker(point)) } }}

以上就是vue使用百度地图的基础操作

本文链接地址:https://www.jiuchutong.com/zhishi/297287.html 转载请保留说明！

上一篇：Transformer中解码器decoder的详细讲解（图文解释）(transformer的解码器)

下一篇：瑞数5.5逆向笔记（纯扣算法）