vue-baidu-map使用方法（简单快速）在vue项目中使用

需求：浏览器中显示百度地图一个坐标。

效果展示：

1.安装 vue-baidu-map 官网地址（https://dafrok.github.io/vue-baidu-map/#/zh/start/installation）

npm install vue-baidu-map --save

2.在main.js中引入

//main.jsimport Vue from 'vue'import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: ''  //  在此输入你自己的百度地图ak
})

3.在需要的页面使用：

// 使用页面.vue
<template><div class="contact"><baidu-map class="map" :center="markerPoint" :zoom="16"> <bm-marker :position="markerPoint" :dragging="true" @click="infoWindowOpen"><bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen" style="font-size:13px">北京xxxx <br><br>地址：北京市</bm-info-window></bm-marker> </baidu-map></div>
</template><script>
export default {data() {return {markerPoint:{lng: 116.4, lat: 39.9},show:false};},methods: {infoWindowClose () {this.show = false},infoWindowOpen () {this.show = true}}
};
</script><style>
.map {width: 553px;height: 398px;
}
</style>

vue-baidu-map使用方法（简单快速）在vue项目中使用相关推荐

vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认关闭弹窗得到经纬度效果: vue baidu map api链接 : https://da ...
Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
Vue中使用百度地图Vue Baidu Map(vue-baidu-map)
最近负责的一个vue项目中需要调用百度地图api做标记打点的需求,记录一下: vue-baidu-map 官方地址一.插件的安装 1.npm 安装 $ npm install vue-baidu-m ...
前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件
快速实现基于uQRCode封装简单快速实用全端二维码生成插件; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12677 效果图 ...
unformat方法java_快速入门介绍Java中强大的String.format()
快速入门介绍Java中强大的String.format() 发布于 2020-12-12| 复制链接摘记: 前言从 Java 5.0 开始,String 类新增了一个强大的字符串格式化方法 form ...
Vue CLI 脚手架详解：快速构建 Vue.js 项目的利器
目录一.安装和创建项目二.项目结构三.开发和构建四.插件和配置 Vue CLI 是 Vue.js 官方提供的脚手架工具,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了丰富的功 ...
利用Vue-cli3简单快速搭建前端项目架构
安装如果在电脑上已经安装了vue-cli2.0如果想要把其替换成vue-cli3.0的话需要先卸载原有vue-cli2.0的版本. npm uninstall vue-cli -g 卸载完成之后就直 ...
vue 方法获取返回值_Vue项目中Api的组织和返回数据处理的操作
项目中的所有Api配置放在一个文件中,便于查找和修改,Api的版本从配置文件(config.js)中读取,采用 apiPrefix + url 的形式组成. 在配置文件中,Api 的配置采用 Http ...
vue 引入pdf跨域问题怎么解决_VUE项目中的跨域问题
[摘要]跨域问题是前端开发人员比较常见的问题, 那么跨域出现的原因, 该如何解决跨域, VUE中对跨域又是怎样处理的呢 [作者]田鋆鹏一. 前端为什么会出现跨域问题? 跨域问题是浏览器同源策略限制, ...
uniapp - [最新] 超详细实现支付宝小程序获取手机号、个人信息，支付宝弹框授权拿到用户手机号与昵称头像等信息完整流程（详细示例源码与注释，一键复制快速应用到项目中）
效果图网上的文章乱七八糟的都不行,新手小白很难看懂,本篇文章通俗易懂. 本博客实现了在uniapp 支付宝小程序项目中,从 0-1 描述了如何授权获取用户的手机号和头像昵称信息,一看就能懂你可以跟 ...

vue-baidu-map使用方法（简单快速）在vue项目中使用

vue-baidu-map使用方法（简单快速）在vue项目中使用相关推荐

最新文章

热门文章