vue中引入百度地图jsapi的方法

本文为大家介绍了vue中两种引入百度地图api的方法，分别是直接引入script标签和通过模块化引入两种方法，希望对大家有一定的帮助。

最直接的方式，通过script标签引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>

这种方法的原理，就是直接给全局widow对象添加一个BMap对象，从而可以使我们在已经加载api的页面的任何地方，使用百度地图的api。

但是单单通过引入的方法，对于使用单文件组件的vue+webpack开发的项目，显然是不够的。于是，通过网上查资料。这里找到了两种方法。

直接引入script标签

第一种方法是通过直接引入的方法，当然除了引入script标签还不够，要想在vue文件中使用bmap对象，还需要在webpack的配置文件中，设置外部扩展(externals属性)

externals: {
    'BaiduMap': 'BMap'
}

externales属性来自官方的解释是:

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

我们就可以在我们的项目中通过引入js文件的方法，直接使用百度地图的api。

import BaiduMap from 'BaiduMap'
export default {
    name: 'Index',
    ....
    mounted() {
        var map = new BaiduMap.Map('allm<i style="color:transparent">本文来源gaodai$ma#com搞$$代**码)网8</i>ap') // 创建地图实例
        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安装，然后使用。

（1）安装

npm i vue-baidu-map --save

（2）初始化

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'    //这个地方是官方提供的ak密钥
})

（3）组件使用

<template>
  <baidu-map class="map">
  </baidu-map>
</template>

<style>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 300px;
}
</style>

本文转自:http://www.javanx.cn/20191206/vue-js-bmap/

更多前端的相关知识，请关注搞代码网

以上就是vue中引入百度地图jsapi的方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)