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

muddyway 发布于2019-08-23 10:23 / 552人阅读

摘要：下引入百度地图的两种方法前言今天有个项目需要用到百度地图，一般我们在移动端使用百度地图，都是直接通过这样的方式，直接引入百度地图的。通过模块化引入的方法实际上百度地图官方去年已经开源了基于的和的对应开源组件，我们可以直接通过安装，然后使用。

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

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

这种方法的原理，就是直接给全局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

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中采用的是官方的示例如

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

通过模块化引入的方法

实际上百度地图官方去年已经开源了基于jsApi的vue和react的对应开源组件，我们可以直接通过npm安装，然后使用。
VUE:[https://github.com/Dafrok/vue...]
React:[https://github.com/huiyan-fe/...]
可参考它们在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密钥
})

使用

云服务器 GPU云服务器数据统计的两种方法 json的两种结构】最优生成树的两种算法域名解析的两种主要方式为

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96300.html

vue项目中使用百度地图(vue-baidu-map)

摘要：当属性为合法地名字符串时例外，因为百度地图会根据地名自动调整的值由于百度地图只有一种加载方式，因此组件及其所有子组件的渲染只能是异步的。在使用vue做项目的时候，有用到百度地图，使用了vue-baidu-map插件，包括拾取位置坐标，搜索位置等 1.引入方式 showImg(https://segmentfault.com/img/bVbv0hs?w=835&h=531); 可在ap...

番茄西红柿 2019-08-26 10:35 评论0 收藏0
vue地图可视化 ArcGIS篇（3）

摘要：不建议底图选择中存在两种不同坐标体系，如下图坐标存在明显的偏差，火星坐标在采用坐标系的地图上位置偏上彩色中国天地图全球卫星地图例如我们使用的类进行查找，返回的数据都是国际坐标，因此必须进行偏差纠正。 ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本，由于版本3与4在API等存在较大区别，就不一一列举，详细区别看官方...

oogh 2019-08-23 12:38 评论0 收藏0
vue异步加载高德地图

摘要：异步加载异步加载指的是为指定加载的回调函数，在的主体资源加载完毕之后，将自动调用该回调函数。几种加载js的方式同步加载异步加载延迟加载同步加载用的最多的一种方式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。...

zacklee 2019-08-22 18:08 评论0 收藏0
前端小知识--地图坐标转换

摘要：实际中我们可能会用到不同的地图，那么就对应到不同坐标系的转换，比如说，你有一份的数据服务，你要展现在百度或者高德地图上，这时候你就需要转换了。地图坐标转换 LBS，基于位置的服务（Location Based Service)，近年来已经无处不在，尤其是我们前端，相信或多或少都有接触一些地图API服务，比如高德、百度啊、谷歌啊~但是用的时候可能看到下面这些字眼：比如BD09、火星坐标...

liangdas 2019-08-22 15:08 评论0 收藏0