详解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 相关文章推荐
JS中showModalDialog 的使用解析
Apr 17 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
js实现电灯开关效果
Jan 19 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python模块restful使用方法实例
2013/12/10 Python
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
采购部岗位职责
2013/11/24 职场文书
六查六看自查材料
2014/02/17 职场文书
企业诚信承诺书
2014/05/23 职场文书
企业党员个人自我评价
2014/09/20 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
合同纠纷调解书
2015/05/20 职场文书