1.创建秘钥ak

申请入口:传送门

提交后如下(访问应用(ak)栏下的就是密钥复制走用就可以)

引入script

1.打开index.html

2.插入script

// 把密钥替换在您的密匙的位置
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

在需要的vue 文件中插入一个空div

空div用来存放地图需要设置宽高;

// 空div用来存放地图需要设置宽高;
<div id="container" style="width: 800px;height: 800px"></div>

在script标签中写入js部分

需要哪些功能可以写在onMouted中下面为例子入口:传送门

onMounted(function(){// var map = new BMap.Map('container');//    var point = new BMap.Point(113.98338,35.288341);//    map.centerAndZoom(point, 15);//    map.enableScrollWheelZoom(true);// GL版命名空间为BMapGL// 按住鼠标右键，修改倾斜角和角度var map = new BMapGL.Map("container");    // 创建Map实例map.centerAndZoom(new BMapGL.Point(113.985275,35.288175), 20);  // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件map.addControl(zoomCtrl);})

onMouted语法

引入:

// 在vue中引入
import {onMounted,} from 'vue'

使用格式参考上面: 在script标签中写入js部分写法;

vue3.0实现地图功能相关推荐

vue3.0环境搭建
安装最新版nodejs Node.jshttps://nodejs.org/zh-cn/安装过程非常傻瓜,一直下一步到完成 -------------------------------------- ...
VUE3.0 二. vue-cli3 配置指南
VUE3.0 二. vue-cli3配置指南一.vue.config.js 详解官网地址: https://cli.vuejs.org/zh/config/ 使用vue3 的时候需要添加一个vue ...
VUE3.0 一.安装node.js、vue3.0脚手架
VUE3.0 一.安装node.js.vue3.0脚手架 1.安装nodejs 首先去官网下载nodejs 查看npm和node版本,出现版本号即安装成功. npm -v # 6.13.4node - ...
vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...
使用vue3.0和element实现后台管理模板
通过自己所学的这段时间,利用空余时间,使用vue3.0脚手架搭建的一个关于后台的管理模板,所实现功能也是模仿一个后台的界面,数据分为两种存放,一种是直接存储到mlab,这里的数据是存放这登录注册,只有 ...
Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...
/** * @Desc Vue3.0虚拟滚动条组件V3Scroll * @Time andy by 2021-01 * @About Q:282310962 wx:xy190310*/ props: ...
【Vue】Docker + Nginx 部署 Vue3.0 项目
Docker + Nginx 部署 Vue3.0 项目 1.用指令 npm run build 打包vue.js项目(该项目是在WebStorm里面新建的Vue空项目). 打包成功后,会生成一个目录d ...
vue3.0实现原理
vue3.0.js ------------------ function Vue(option){ this.$el = document.querySelector(option.el); // ...

vue3.0实现地图功能

vue3.0实现地图功能

1.创建秘钥ak

引入script

1.打开index.html

2.插入script

在需要的vue 文件中插入一个空div

在script标签中写入js部分

onMouted语法

vue3.0实现地图功能相关推荐

最新文章

热门文章