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


Posted in Javascript onFebruary 12, 2019

(1)在index.html文件中引入百度地图

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

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

(2)在webpack.base.conf.js文件内添加external选项,在module.exports内部,和entry平级;

externals: {
  "BMap": "BMap" 

},

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

(3)添加地图组件BMapComponent.vue,这里主要注意两点:

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

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

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的组件的方法步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 #Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 #Javascript
图文详解vue框架安装步骤
Feb 12 #Javascript
详解vue组件中使用路由方法
Feb 12 #Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 #Javascript
详解Vue用cmd创建项目
Feb 12 #Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 #Javascript
You might like
Snoopy类使用小例子
2008/04/15 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
setAttribute 与 class冲突解决
2008/02/17 Javascript
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python如何快速实现分布式任务
2017/07/06 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
利用指针变量实现队列的入队操作
2012/04/07 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
经典广告词大全
2014/03/14 职场文书
新学期开学演讲稿
2014/05/24 职场文书
五五普法心得体会
2014/09/04 职场文书
委托收款证明
2015/06/23 职场文书
新闻通讯稿模板
2015/07/22 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python