麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

[WebGIS] HTML5跟踪GPS轨迹(7)VueJS引入百度地图

通过前文的工作已经可以使用HTML5记录并保存数据,同时实现了应用的相关设置功能。下面的工作就是要查看已经记录下的信息了,当然给我们一个一个的坐标点我们是无法查看出定位效果的。最好的方法还是将定位点的数据叠加到地图上显示。使用vue-cli这个工具要求引入的js是基于模块化编写的,要使用百度地图还需要经过一点特殊的设置。主要分以下几个步骤:

1.引入百度地图API

在vue-cli生成的目录中,找到index.html文件。如图:

在其中引入百度地图的JS-API,代码如下格式:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里写入你申请到的API-KEY"></script>

这里需要用到你申请到的API-KEY,申请地址:http://lbsyun.baidu.com/apiconsole/key

2.设置webpack

找到bulid\webpack.base.conf.js文件,在webpack的设置中加入下面的代码:

externals: {
  'BMap': 'window.BMap'
},

如图:

3.引入BMap

App.vuescript开头引入BMap,就可以像之前的开发方式一样,使用百度地图了。

import BMap from 'BMap';
麻辣GIS-Sailor
作者:
GIS爱好者,学GIS,更爱玩GIS。
微博关注
手机阅读
赞赏支持
手机阅读
微信捐助麻辣GIS
微信打赏
支付宝捐助麻辣GIS
支付宝打赏

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

3.如果本文对您有所帮助,请您对我们团队进行 打赏捐助让我们在传播3S的路上可以走得更远,不胜感激。PS:如果你是学生党,请优先把经费用于购买学习资料 以及 与小哥哥/小姐姐约会上:-)

如您有疑问,可在文末留言,或到麻辣GIS QQ群中提问。

QQ群(一):291616564 加入QQ群

QQ群(二):166408035 加入QQ群

QQ群(三):627853279 加入QQ群

QQ群(四):436386604 加入QQ群

QQ群(五):606176554 加入QQ群

QQ群(六):946178380 加入QQ群

QQ群(七):861271808 加入QQ群

新疆互助群:910717627 加入QQ群

微信公众号:malagis,扫描右边二维码直接关注。

发表评论