uniapp 中使用天地图，安卓端、h5

 

背景：项目需要将高德地图换成天地图，pc端已经更换，但app端用uniapp写的，就有点茫然了，毕竟uniapp官方给出的地图组件也不支持啊，网上找吧，也没什么例子，算了，自己写吧。

 思路：使用 uniapp中 renderjs 来引入使用天地图；注意：renderjs中不能使用任何uniapp的api，h5中可能没事 但app就不行了。网上也有使用  直接引入地图的，但看他们说样式不好改，就没使。

代码如下：

  1.html 中创建地图容器

  2.普通 js 

 3.renderjs 接受变量值，并获取数据 渲染地图

 4.坐标转换

npm  i  gcoord;  安装转换插件

使用如下：

import gcoord from 'gcoord';

// 高德地图坐标转天地图坐标
 export function exchangeGdToTdt(lng,lat){
     if(!lng || !lat){
				return {}
			}
      let wgsJson = gcoord.transform(
        [lng,lat],    // 经纬度坐标
        gcoord.GCJ02,      // 当前坐标系  高德 火星坐标
        gcoord.WGS84        // 目标坐标系 天地图
      );
      return {
        lnggcj: wgsJson[0],
        latgcj: wgsJson[1]
      };
    }

普通 js 想调用 renderjs 中的方法，只能通过点击事件；renderjs向普通js传递数据 只能通过 ownerInstance 对象，所以 点击事件关联着 这两种js。目前这是我看到的结果，希望有帮到大家。如果大家有更好的办法，也可以告诉我呀。

一开始不是找半天例子找不着吗，结果 等我写完了，我就看到了个相关的例子。。。额，但我没仔细研究过，链接贴上，也许以后会用到：uni-app如何引入天地图并兼容app_uniapp 天地图-CSDN博客

还有就是，这代码，可能少括号。