当前位置：首页 > news >正文

vue3中引入百度地图

news 2025/8/3 23:10:19

话不多说直接开干

1.第一种方式

百度地图地址打开
https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

然后点进去地图

在这里插入图片描述

然后再这个功能里面选择一个地图，然后跳转页面然后一直下滑滑到底部点击这个

在这里插入图片描述

跳转到这个页面然后点击进入demo这个

在这里插入图片描述

然后到这个demo的实例的页面然后我们选择旁边的html的结构然后复制一下

在这里插入图片描述

然后我们把html文件粘贴到我们下图的这个vue3脚手架中的index.html中

在这里插入图片描述

然后我们需要替换一下我们复制的ak 就是我们应用的ak 我们现在百度首页官网中找到我们的控制台

在这里插入图片描述

如果没有ak的话去创建一个应用然后选择我们的浏览器端然后使用ak

html结构

html 这里替换成我们刚刚注册拿到的ak 然后运行项目就可以正常显示地图了然后我们可以在这个js中加入我们想要的一个地图的效果

如果没有ak的话显示报错

在这里插入图片描述

第一种是非常方便的，直接粘贴在我们vue的项目中的index.htlm文件中即可，但是问题呢
我们的vue项目中的所有的页面展示的都是这个地图
那么我们想要这个地图在我们页面中的一个区域进行展示和其他操作那么看第二种方法

第二种

我们准备一个vue页面
然后html结构的元素

<template><div><div id="container"></div></div>
</template>

然后我们的js的逻辑部分

<script setup>// 初始化script
function loadJScript() {const script = document.createElement('script');script.type = 'text/javascript';script.src = 'https://api.map.baidu.com/getscript?v=3.0&ak=你的ak&services=&t=20230808155339';script.onload = () => {init()}document.body.appendChild(script);
}
// 初始化地图
function init(position = new BMap.Point(116.403963,39.915119)) {const map = new window.BMap.Map('container'); // 创建Map实例const point = position; // 创建点坐标const points = [new BMap.Point(116.402867,39.915541),new BMap.Point(116.404807,39.915562),new BMap.Point(116.404803,39.914864),new BMap.Point(116.403882,39.91457),new BMap.Point(116.402768,39.914701),];const polygonOptions = {strokeColor: "red", // 边界线颜色strokeWeight: 1,    // 边界线宽度strokeOpacity: 0.8, // 边界线透明度fillColor: "blue",  // 填充颜色fillOpacity: 0.4    // 填充透明度};const poly = new BMap.Polygon(points, polygonOptions)// 折线添加到地图中map.addOverlay(poly)map.centerAndZoom(point, 20);var marker = new BMap.Marker(point);map.addOverlay(marker);map.enableScrollWheelZoom(); // 启用滚轮放大缩小}window.onload = loadJScript(); // 异步加载地图</script>