详解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搜索同辈元素方法
Feb 10 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 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递归调用与静态变量使用
2012/12/16 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python实现的rsa加密算法详解
2018/01/24 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
无工作经验者个人求职信范文
2013/12/22 职场文书
质检员岗位职责范本
2015/04/07 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏