如何将百度地图包装成Vue的组件的方法步骤

2024-07-30 17:10:44

（1）在index.html文件中引入百度地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=piXQ5CgHFqEefqCVbhhBFfe6HjF7l4zW "></script>

（2）在webpack.base.conf.js文件内添加external选项，在module.exports内部，和entry平级；

externals: {
  "BMap": "BMap" 

},

（3）添加地图组件BMapComponent.vue，这里主要注意两点：

a）使用BMap的时候需要import (经过本人测试，如果不用import会提示BMap未定义)

b）注意一定要给bmap的div设置高度，否则会看不见

该组件的代码如下

<!-- 页面模版 -->
<template>
 <div>
  <!--header-->
  <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header>
  <!--header end-->

  <!--container-->
  <div id="allmap"
      style="
        width: 100%;
        height:200px;
        border: 1px solid gray;
        overflow:hidden;">
    </div>
  <!--container end-->
 </div>
</template>
<script>
import comHeader from 'components/comHeader'
import BMap from 'BMap'
export default {
 components: {
  comHeader
 },
 data: () => ({
  headerData: {
   title: '网点详情',
   toLink: '/SalesOutlets'
  }
 }),
 created () {
  // 组件创建完后获取数据，这里和1.0不一样，改成了这个样子
  this.loadMap()
  // this.ready() // 如果在此处直接调用this.ready()方法，将无法加载地图
 },
 mounted () {
  this.ready()
 },
 methods: {
  loadMap: function () {
   console.log(this.$route.params.name)
   console.log(this.$route.params.addr)
   console.log(this.$route.params.phone)
   // setTimeout(this.ready, 0)
  },
  ready: function () {
   var map = new BMap.Map('allmap')
   map.enableScrollWheelZoom(true)
   console.log(map)

   var localSearch = new BMap.LocalSearch(map)
   // localSearch.enableAutoViewport() // 允许自动调节窗体大小
   map.clearOverlays() // 清空原来的标注
   localSearch.setSearchCompleteCallback(function (searchResult) {
    var poi = searchResult.getPoi(0)
    map.centerAndZoom(poi.point, 20)
    var point = new BMap.Point(poi.point.lng, poi.point.lat)
    var marker = new BMap.Marker(point) // 创建标注，为要查询的地方对应的经纬度
    map.addOverlay(marker)
   })
   localSearch.search(this.$route.params.addr)
  }
 }
}
</script>
<style>
 /* 去掉地图左下角的百度LOGO */
 .anchorBL {
  display:none
 }
</style>

如果直接在实例生命周期的created中调用this.ready()方法将无法加载地图，我在index.html中加入了一个id为allmap的div，当我调用该组件时，该组件上的div没有显示地图，而index.html中id为allmap的div里却显示了地图，经过测试我猜测是因为该组件还没有初始化完毕，导致new BMap.Map('allmap')时实例化地图对象失败。所以应该在实例生命周期的mounted中调用this.ready()方法。

实例生命周期参见：https://cn.vuejs.org/v2/guide/instance.html

（4）在父组件中使用
a）引入 import BMapComponent from './components/BMapComponent.vue'
b）在template中增加标签

<b-map-component></b-map-component>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue的百度地图插件尝试使用

百度地图插件安装 CDN全局安装 <script src="https://unpkg.com/vue-baidu-map"></script> 插件的引入 Vue.use(VueBaiduMap.default, { ak: 'YOUR_APP_KEY', }) ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apico... 地图视图 BmView 是用于渲染百度地图实例可视化区域的容器使用 Bmview 渲
vue项目中使用百度地图的方法

1.在百度地图申请密钥: http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {
详解vue在项目中使用百度地图

第一步,去百度地图开发者申请秘钥. 第二步在项目中引入,具体如下其中index.html存放地图链接,代码如下然后在APP.vue里面实现,代码如下 <template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </tem
浅谈Vue下使用百度地图的简易方法

Vue下使用百度地图的简易方法,分享给大家,具体如下: 最近的项目里面,需要用到将具体地址转换成百度坐标系的经纬度,需求比较简单,所以就没有采用GitHub里面的百度Vue插件. 废话不说,直接贴出代码: 引入:在需要用到百度地图的组件里面直接引入 export default { methods: { loadBMapScript () { let script = document.createElement('script'); script.src = 'http://api.map.b
详解vue.js下引入百度地图jsApi的两种方法

前言今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script> 这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们
Map.vue基于百度地图组件重构笔记分享

Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,
vue.js的vue-cli脚手架中使用百度地图API的实例

第一步,去百度地图开发者申请密钥. 1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript API-->立即使用-->创建应用) 2.密钥申请成功后第二步,在项目的需要模板中引入,具体如下: 项目路径其中index.html存放地图链接,代码如下在百度地图开放平台服务介绍中选择我们所需要的地图类型 demo演示可查看选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=j
2种在vue项目中使用百度地图的简单方法

地图在项目中用得很多,最近也用了几次,好长时间不用都记不清了,闲暇时整理了vue里使用百度地图的2种方法,方便自己查看,也分享给大家,希望可以帮助有需要的人. 普遍的方法是: 1.index.html 中引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 2.新建个组件maps 注意 :不要把组件命名为
vue中使用heatmapjs的示例代码（结合百度地图）

业务需求:将heatmap引入页面中,做成一个可引入的框架,使用于所有页面.代码如下. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .heatmap { width:1900px; height:1900px; } </style> <script src="js/h
如何将百度地图包装成Vue的组件的方法步骤

(1)在index.html文件中引入百度地图 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=piXQ5CgHFqEefqCVbhhBFfe6HjF7l4zW "></script> (2)在webpack.base.conf.js文件内添加external选项,在module.exports内部,和entry平级: external
基于百度地图api清除指定覆盖物(Overlay)的方法

最近用百度地图api做项目,需要同时在地图显示marker与Polyline,且Polyline需要根据点击来显示或清除,所以遇到了清除指定覆盖物的问题,各种搜索后未能找到完美的解决方法,通过自己思考,摸索了一方法能解决这个问题,发出来给大家分享.好了,进入正题: 清除覆盖物有两个方法:map.removeOverlay()或者 map.clearOverlays(),clearOverlays()方法一次移除所有的覆盖物,removeOverlay()一次移除一个指定覆盖物,显然,我要一次移除
idea将maven项目改成Spring boot项目的方法步骤

1.添加parent父级依赖在pom.xml文件中,要首先添加parent父级依赖  <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artif
详解Vue注册组件的方法

目录简介说明官网网址组件名字全局注册(一般用于框架) 局部注册(不常用) 模块系统在模块系统中局部注册(常用) 基础组件的自动化全局注册简介说明本文介绍Vue注册组件的方法. Vue注册组件有这几种:全局注册.局部注册.在模块系统中注册. 官网网址 https://v2.cn.vuejs.org/v2/guide/components-registration.html 组件名字注册一个组件的时候,需要给它一个名字.比如在全局注册: Vue.component('my-com
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解

百度地图的经纬度放到腾讯地图里面解析地址,导致位置信息显示不正确,所以利用腾讯地图提供的API进行转换. 如果没有开发密钥(key),就到腾讯地图官方文档进行申请和下载qqmap-wx-jssdk.js 腾讯地图官方文档申请步骤填写信息 wxml代码 <map id='map' longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" show-loc
vue弹窗组件使用方法

本文实例为大家分享了vue弹窗组件的具体代码,供大家参考,具体内容如下弹窗是一个项目必备的复用利器,所以封装起来,保证项目ui一致,是很有必要的.学了一段时间vue,想想还是用vue写一下吧.用的很小白,但是会写出来了,说明我也有进步一丢丢了.继续加油-. 代码贴图如下,样式比较丑,不要介意- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
vue分页器组件编写方法详解

使用vue编写的分页器组件,支持输入页码跳转,效果如图: 1.点击前五页: 2.点击中间部分页面 3.点击第一页,上一页按钮失效,点击最后一页,下一页按钮失效组件调用: //html调用参数:pageSize(总页数);pageNo(当前页) <pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager> //组件引入 import pager
vue验证码组件使用方法详解

本文实例为大家分享了vue验证码组件使用的具体实现代码,供大家参考,具体内容如下代码如下: <template> <div class="join_formitem"> <label class="enquiry">验证码<span>:</span></label> <div class="captcha"> <input type="text&
Vue对话框组件使用方法详解

本文实例为大家分享了Vue对话框组件的使用,供大家参考,具体内容如下效果如下图所示:(整体样式模仿ant-design-vue Modal样式,同时阴影覆盖浏览器窗口) ①创建组件Dialog.vue: <template> <div class="m-dialog-mask"> <div class="m-modal"> <div class="m-modal-content"
Vue分页器组件使用方法详解

本文实例为大家分享了Vue分页器组件的使用,供大家参考,具体内容如下效果图如下: 鼠标悬浮时切换为箭头: ①创建自定义分页组件Pager.vue:预设主题色为@themeColor: #D93844; 每页展示10条数据,一次最多显示5个页码,支持输入页码跳转: <template> <div class="m-pager-wrap" v-if="totalCount"> <span class="u-text&

如何将百度地图包装成Vue的组件的方法步骤

相关推荐

随机推荐