Vue项目中使用百度地图+mapv
1、安装依赖
npm install vue-baidu-map --save
npm install mapv --save
2、main.js
import BaiduMap from "vue-baidu-map";Vue.use(BaiduMap, {ak: '百度地图key'
})
3、使用
<template><div><baidu-map v-model="addressKeyword"@ready="handler":scroll-wheel-zoom="true":center="location":zoom="zoom"></baidu-map></div><script>export default {name: 'iMap,methods: {handler({BMap, map}) {this.mapv = require("../../../public/mapv.js")// 地图相关配置代码......var mapvLayer = new this.mapv.baiduMapLayer(map, dataSet, options);}}</script>
</template>
4、遇到过的问题
1》mapv.js在index.html中引用,mapv报错this.show is not a function
原因: mapv.js加载先于地图,导致BMap$1为undefined,如下:
function CanvasLayer(options) {... ...this.show();}var global$3 = typeof window === 'undefined' ? {} : window;var BMap$1 = global$3.BMap || global$3.BMapGL || global$3.BaiduMap;**if (BMap$1) {CanvasLayer.prototype = new BMap$1.Overlay();... ...CanvasLayer.prototype.show = function () {if (!this.canvas) {this._map.addOverlay(this);}this.canvas.style.display = "block";};}
解决方法:百度地图加载完成后,再引入mapv.js,即在本例handler中 this.mapv = require(“mapv.js文件地址”)
Vue项目中使用百度地图+mapv相关推荐
- vue项目中 使用百度地图 轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画 在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...
- 百度地图的使用方法,如何在Vue项目中使用百度地图
关于百度地图的解释 百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多 官网入口 https://lbsyun.bai ...
- vue项目中使用百度地图api完成自定义搜索功能(包含搜索详细地理位置)
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
- vue项目中使用百度地图
安装 首先在vue项目中,我们可以使用 vue-baidu-map 插件来替代直接引入百度地图js sdk. 官方文档 JavaScript API v2.0类参考 npm install --sav ...
- 笔记:vue项目中引用百度地图,地图空白现象
最近在项目中使用百度离线地图,可是一切都正常完成的情况下.页面中的地图区域居然是显示空白的: 检查了好久,发现是自己的全局样式造成的: 解决:将全局样式中img标签的max-width和max-hei ...
- vue项目中通过百度地图API获取当前位置定位
1.申请自己的Ak(密钥) 百度地图开发平台 登录后到控制台,然后创建应用,选择对应的配置 创建成功后复制对应的AK就行(注意:创建过程中需要注意应用类型) 2. 创建一个map.js 里面写此代码需 ...
- Vue项目中使用百度地图API
百度地图官方文档 1. 申请百度账号和ak 申请 2. 引用百度地图API文件 <script type="text/javascript" src="https: ...
- 前端项目中使用百度地图api,含实例
前言 一.使用百度地图接口的步骤 二.简单例子 1.第一个地图 2.控件 3.静态/动态添加点圈线面 4.文字标注.信息窗口 5. Web服务API-IP定位服务 6.Web服务API-地点检索服务 ...
- Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图
2019独角兽企业重金招聘Python工程师标准>>> 最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不 ...
最新文章
- 机洗内裤容易得暗病?这个锅我们袜子不背!
- mysql 主从 怎么 升级_MySQL详解主从(主库升级).doc
- asp.net core中IHttpContextAccessor和HttpContextAccessor的妙用
- 安徽计算机中专学校有哪些,安徽2021年中专学校里面都有什么专业
- *17.解释一下最小生成树
- 鸿蒙系统第一次出现,华为鸿蒙系统第三“用户”出现?没想到是它
- WPF 基础控件之 DataGrid 样式
- linux shell之xargs 、tr、sha1sum、head、tail一般使用
- webpack是什么?为什么要用webpack(一个小白的感想)
- oracle 主键_mysql 组合索引带主键ID的问题
- FileSystemWatcher触发多次Change事件的解决办法 .
- 三种典型的博弈论问题(巴什博奕、威佐夫博奕、尼姆博奕)
- c语言程序员表白代码6,520到了——程序员表白代码大全公开!
- ArcGIS制图之地形图制作
- Kali Linux信息收集工具
- 车载摄像头技术、市场、发展前景
- Sentinel-哨兵机制
- 关于领域驱动设计(DDD)的理论知识
- ora-3136故障处理
- 什么是gpt一4-如何用上gpt-4