vue中引入腾讯地图

背景

在一个项目中引入定位功能，该项目使用了vue。

问题

原先是打算使用h5原生位置api进行开发，但是在进行了大量的搜索后，发现h5原生位置api不符合本项目的需求，故而采用了腾讯地图api来定位，获取当前用户的位置。这里肯定有网友会说为什么不用高地图api或者百度地图api，由于本项目是用于商业目的，并且公司资金不多，故而采用腾讯地图api。

注意

在开发跟定位有关的功能时，注意必须在file协议或者https协议进行访问，才能够正常使用定位服务。这个问题困扰了我几天的时间，一直找不到原因所在。后来去翻了一下在之前在渡一教育的前端课程中关于h5的课程，最后找到了问题所在。

代码

index.html

vue组件，获取当前位置的封装对象