vue.js下引入百度舆图jsApi的两种要领

2023年2月24日 178次阅读 来源: luoqua

vue.js下引入百度舆图jsApi的两种要领

媒介

今天有个项目须要用到百度舆图，平常我们在挪动端运用百度舆图，都是直接经由过程如许的体式格局，直接引入百度舆图的jsApi。

<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属性)

//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…]
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密钥
})

运用

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

<style>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 300px;
}
</style>
    原文作者：luoqua
    原文地址: https://segmentfault.com/a/1190000015774280
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞