详解vue.js下引入百度地图jsApi的两种方法


Posted in Javascript onJuly 27, 2018

前言

今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi。

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

这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们在已经加载api的页面的任何地方,使用百度地图的api。但是单单通过引入的方法,对于使用单文件组件的vue+webpack开发的项目,显然是不够的。于是,通过网上查资料。这里找到了两种方法。

直接引入script标签

第一种方法是通过直接引入的方法,当然除了引入script标签还不够,要想在vue文件中使用bmap对象,还需要在webpack的配置文件中,设置外部扩展(externals属性)

//webpack.dev.conf.js

externals: {
  'BaiduMap': 'BMap'
}

externales属性来自官方的解释是:

防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

webpack文档也给出了一个示例:从 CDN 引入 jQuery,而不是把它打包。

index.html

<script
 src="https://code.jquery.com/jquery-3.1.0.js"
 integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
 crossorigin="anonymous">
</script>

webpack.config.js

externals: {
 jquery: 'jQuery'
}
import $ from 'jquery';

$('.my-element').animate(...);

参考这个实例,我们就可以在我们的项目中通过引入js文件的方法,直接使用百度地图的api。

import BaiduMap from 'BaiduMap'
export default {
  name: 'Index',
  .....
mounted() {
    
  var map = new BaiduMap.Map('allmap')            // 创建地图实例
  var point = new BaiduMap.Point(120.343373,31.540212)    // 创建中心点坐标
  var marker = new BaiduMap.Marker(point) // 创建标注

  map.centerAndZoom(point,15)             // 初始化地图,设置中心点坐标和地图级别


  map.addOverlay(marker) // 将标注添加到地图中

}

注意这里,实例化地图api,最好要在mounted阶段进行,如果你的dom中采用的是官方的示例如

<div id="allmap"></div>

因为只有在mounted的阶段,dom才会生成并挂载。

通过模块化引入的方法

实际上百度地图官方去年已经开源了基于jsApi的vue和react的对应开源组件,我们可以直接通过npm安装,然后使用。

VUE:https://github.com/Dafrok/vue-baidu-map

React: https://github.com/huiyan-fe/react-bmap

可参考它们在github上面的文档进行使用。这里只介绍下vue的。

安装

npm i vue-baidu-map --save

初始化

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
 ak: 'YOUR_APP_KEY'  //这个地方是官方提供的ak密钥
})

使用

<template>
 <baidu-map class="map">
 </baidu-map>
</template>

<style>
/* The container of BaiduMap must be set width & height. */
.map {
 width: 100%;
 height: 300px;
}
</style>

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

Javascript 相关文章推荐
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
react-native android状态栏的实现
Jun 15 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
一起深入理解js中的事件对象
Feb 06 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 #Javascript
浅谈Redux中间件的实践
Jul 27 #Javascript
JavaScript多态与封装实例分析
Jul 27 #Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 #Javascript
react native 文字轮播的实现示例
Jul 27 #Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 #Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 #Javascript
You might like
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
php源码的安装方法和实例
2019/09/26 PHP
html下载本地
2006/06/19 Javascript
用正则获取指定路径文件的名称
2007/02/27 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
javascript引用对象的方法代码
2007/08/13 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
python协程之动态添加任务的方法
2019/02/19 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
利用python 读写csv文件
2020/09/10 Python
用python批量下载apk
2020/12/29 Python
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
学校学习雷锋活动总结
2014/07/03 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang