vue中引入百度地图API

原创

前端小tips

发布于 2021-11-30 09:39:47

4990

发布于 2021-11-30 09:39:47

文章被收录于专栏：前端文章小tips

前言

由于项目中需要用到逆地址解析功能及由坐标点（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>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

api