详解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 Hack
Jul 24 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
深入探讨前端框架react
Dec 09 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
localStorage实现便签小程序
Nov 28 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
js canvas实现红包照片效果
Aug 21 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
基于JS实现视频上传显示进度条
May 12 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 daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
Node调用Java的示例代码
2017/09/20 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
vue之延时刷新实例
2019/11/14 Javascript
详解Django rest_framework实现RESTful API
2018/05/24 Python
python自动发微信监控报警
2019/09/06 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
董事长岗位职责
2013/11/30 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
班组长竞聘书
2014/03/31 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
在职证明范本
2015/06/15 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书