关于Vue.js引入百度地图的插件
只为了记录自己所学习的知识,欢迎大佬指点
1、在项目中安装地图插件
npm install vue-baidu-map --save
2、在根目录下的index.html页面中引入地图路径
密匙可以在https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey中获取 <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的密匙"></script>
前期的工作算是做完了接下来就可以在你想要的模块或者组件中去使用举个例子:
<template> <div id="page"> </div> </template> <script> export default { data(){ return {}; }, mounted(){ this.mapdata(); }, methods: { mapdata(){ //创建地图实例 let map = new BMap.Map("page"); //创建点坐标 let point = new BMap.Point(116.404, 39.915); //初始化地图,设置中心点坐标和地图级别 map.centerAndZoom(point,15); //创建标注 let initMarker = new BMap.Marker(point); //向地图中添加单个覆盖物时会触发此事件 map.addOverlay(initMarker); //开启标注拖拽功能 initMarker.enableDragging(); //将标注点移动到中心位置 /* panBy:将地图在水平位置上移动x像素,垂直位置上移动y像素。 如果指定像素大于可视区域范围或者在配置这种指定没有动画 效果,则不执行滑动效果 */ map.panBy(350,225); //添加地图默认控件 map.addControl(new BMap.NavigationControl()); //开启鼠标滚轮缩放 map.enableScrollWheelZoom(true); } }, }; </script> <style scope> #page{ width: 700px; height: 450px; } </style>
接下来运行即可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!