详解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 相关文章推荐
Javascript Math对象
Aug 13 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 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
PHP的宝库目录--PEAR
2006/10/09 PHP
如何在PHP中进行身份认证
2006/10/09 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
永不消失的title提示代码
2007/02/15 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
详解Python Socket网络编程
2016/01/05 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
git进行版本控制心得详谈
2017/12/10 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
python如何实现DES加密
2020/09/21 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
运动会稿件100字
2014/09/24 职场文书
申报材料格式
2014/12/30 职场文书
顶岗实习计划书
2015/01/16 职场文书
雷锋观后感
2015/06/10 职场文书
python实现商品进销存管理系统
2022/05/30 Python