Vue集成腾讯地图或谷歌地图

Vue+ts集成腾讯地图

---

背景：使用腾讯定位和展示坐标地点

ps:由于使用vue+ts开发的项目嵌入到微信公众号选择了腾讯地图作为载体渲染marker，定位本可以使用jsssdk，这里使用腾讯地图的getLocation接口（需引入'https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js'）。

集成步骤(加载顺序很重要)：

大致方式：1.获取key，2.引入js，3.所需页面初始化地图，4.使用marker和infowindow 5.涉及坐标的转换

1.去腾讯官网https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsOverview注册并生成key和appName(对应项目名即可)

2.这里贴上代码加载有点不一样，引入'https://map.qq.com/api/js?v=2.exp&key=xxxxx&callback=init'必须要有不然会失败官方文档也有，腾讯地图不提供多语言，但谷歌地图可以传入多语言'https://maps.google.com/maps/api/js?key=xxx&language='zh-cmn-Hant''。

3.页面上使用

1.ts中需要在需使用的页面声明变量qq，因为腾讯地图把地图实体挂在window上，并且需要在声明这个模块以防止变量undefined。

2.在项目中注意marker以及infowindow的清除和设置用数组保存。

3.注意不同地图坐标算法不一样，腾讯国内使用火星坐标系 (GCJ-02)，由于后台数据的经纬度使用GPS84所以坐标需要转换(坐标转换链接：https://www.jianshu.com/p/8975586a820e 根据需要自行转化代码)