腾讯地图的探索与实践

背景：在项目中多处使用到了腾讯地图，发现腾讯地图相比于高德地图更加稳定，其API更具有以下优点: 腾讯地图JavaScript API链接：lbs.qq.com/webApi/java… 腾讯地图使用方法:1.我们可以先在腾讯地图官网申请用于开发鉴权的key：

2.在index.html中引入

在需要的地方创建地图组件，这里以某个项目为例：

js相关代码如下： 效果如下：遇到的问题及其解决办法：在某个app开发中，先从苹果自带的地图获取地址坐标然后直接在腾讯地图对输入坐标进行地址描述，发现经纬度存在偏移量后将苹果地图地址坐标转换为腾讯地图地址坐标过程中，发现在腾讯地图逆地址获取经纬度后，传入经纬度使用其api中的 getAddress 方法之后会遇到跨域的问题。解决方法：使用jsonp解决了其跨域问题。代码如下：​

transfer(x, y) {
      return new Promise((resolve, reject) => {
        // @ts-ignore
        if (!this.$isIos) {
          const locations = [
            {
              lng: y,
              lat: x,
            },
          ];
          // @ts-ignore
          resolve({ locations });
        } else {
          // @ts-ignore
          window.transfer = function (data) {
            // @ts-ignore
            resolve(data);
          };
          const locations = `${x},${y}`;
          const script = document.createElement("script");
          script.type = "text/javascript";
          script.async = false;
          // @ts-ignore
          script.$transfer = true;
          script.src = `https://apis.map.qq.com/ws/coord/v1/translate?locations=${locations}&type=1&output=jsonp&callback=transfer&key=6V3BZ-2FR62-ECAUP-CYAOB-S3TM3-A7FRK`;
          if (script.onerror) {
            reject(script.onerror);
          }
          script.onerror = reject;
          const scripts = document.getElementsByTagName("script");
          for (let index = 0; index < scripts.length; index++) {
            // @ts-ignore
            if (scripts[index].$transfer) {
              document.head.removeChild(scripts[index]);
              break;
            }
          }
          document.head.appendChild(script);
        }
      });
    },

腾讯地图玩法太多了，期待大家能够开发不同的玩法，实现更炫的功能