如何将百度地图包装成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 相关文章推荐
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
php 保留小数点
2009/04/21 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
永不消失的title提示代码
2007/02/15 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python进阶篇之字典操作总结
2016/11/16 Python
python发送邮件实例分享
2017/07/28 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
python处理写入数据代码讲解
2020/10/22 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
师范应届毕业生自荐信
2013/11/18 职场文书
工程总经理工作职责
2013/12/09 职场文书
后勤工作职责
2013/12/22 职场文书
初中美术教学反思
2014/01/29 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
弄虚作假心得体会
2014/09/10 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2014年人事部工作总结
2014/12/03 职场文书
2015年考研复习计划
2015/01/19 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android