提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

vue中引入百度地图API

Vue API
2023-03-20 15:00:03 时间

前言

由于项目中需要用到逆地址解析功能及由坐标点（112.54362， 30.2546）转为地址信息（xx省xx市xx县），故考虑用百度地图API进行完成。 查阅资料有两种方法可以实现。

第一种 直接引入script标签

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

此时我们还需要告诉webpack，这个是在运行时再去从外部获取这些扩展依赖。 需要在webpack.base.conf.js中设置externals属性，以便可以在vue中进行引用

接下来就可以在文件中愉快的引用了

import BMap from 'BMap';

在我愉快的写好的代码后，发现还是太年轻。 我项目中用到了api的定位和逆地址解析功能，发现后台有警告并且api功能无法使用

点开发现百度js的内容为：

(function(){ 
  window.BMap_loadScriptTime = (new Date).getTime(); 
  document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=你的密钥&services=&t=20200109192240"></script>');
})();

里面包含了 document.write方法，而异步加载的js是不允许使用document.write方法的 将我们之前的引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

修改为下面的样子，及console里面有对应的url.填入那个url之后便可正常使用,且不会有提示了,而且能正确使用里面的api了

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=你的密钥&services=&t=20200109192240"></script>

第二种 通过模块化引入的方法

百度地图官方已经有api的vue版本 地址：https://github.com/Dafrok/vue-baidu- map

安装

npm i --save vue-baidu-map

初始化

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
​
Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'
})

使用

<template>
  <baidu-map class="map">
  </baidu-map>
</template>
​
<style>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 300px;
}
</style>

相关文章