uniapp H5引入騰訊地圖，報錯TMap is not defined...解決辦法

在網上搜索了許多關於uniapp引入騰訊地圖的方法都以失敗告終，我開發的應用主要使用於H5，小程序與H5是不同的sdk，就不在這說了，況且小程序有手把手教學，可參考騰訊地圖官網https://lbs.qq.com/

想看怎么導入，直接跳到第三點

 

開發過程中主要遇到的問題為：

　　1.SDK問題

　　網上關於sdk的申請已經有很多教程了，此處便不多說，uniapp內置了map組件，但是使用過的人都知道，uniapp內部的組件，只支持了標點marker等一些簡單api，如果想使用搜索附近商店、搜索附近醫院、路徑規划等api，還是需要申請專門的地圖sdk，申請專門的sdk的好處也在此，可以使用地圖的更多數據方面的功能，但是接口的調用不是總是免費的，如果商用量大需要付費購買。

　　ps:選擇位置api，uniapp是支持的，調用函數如下（直接在onload時調用，直接就可以查看效果，此處應該是用了web-view鑲嵌的方法調用的騰訊的這個組件吧）：

                // 選擇位置
                uni.chooseLocation({
                    success: function(res) {
                        console.log('位置名稱：' + res.name);
                        console.log('詳細地址：' + res.address);
                        console.log('緯度：' + res.latitude);
                        console.log('經度：' + res.longitude);
                    }
                }

 

 　　調用效果：　

　　

 

　　uniapp在申請sdk時需要記住小程序填寫授權APP ID，

 

　　2.小程序與H5不兼容的問題

　　　　后面補充 

 

　　3.H5頁面加載地圖失敗問題

　　　　因為對uniapp的使用也不是很熟悉，uniapp怎么引入騰訊地圖也成了問題，嘗試了三個方法引入，script引入，npm import導入（網上說騰訊並未把地圖托管到npm上或者是開發者自己上傳的版本很舊，所以此方法大概率是不可行的）...網上有說manifest.json的平台允許問題，又說vue.config的配置問題，還有說webpack打包配置的問題，小程序和h5兼容支持的問題、uniapp不支持騰訊地圖等...但最后，就是導入的方式不對而已。

　　　　只要正常的html能加載的，uniapp的h5也一定可以加載，使用vue的導入方式即可。

 

　　　　如果是調用sdk，就可以直接按照官方文檔調接口就可以了，但是我想引入騰訊地圖（組件+API一起用），按照騰訊地圖的官方文檔不論是哪種導入，都一直報錯 TMap is not defined...

<script src="https://map.qq.com/api/gljs?v=1.exp&key=yourkey"></script>

　　　　將yourkey換成自己申請的key，但以上方法在uniapp不可行，直覺告訴我是引入的姿勢不對...

　　　　換成這樣引入就成功了：

　　　　①新建一個TMap.js文件

export function TMap(key) {
      return new Promise(function(resolve, reject) {
          window.init = function() {
              resolve(qq) //注意這里
          }
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = "http://map.qq.com/api/js?v=2.exp&callback=init&key=" + key;
          script.onerror = reject;
          document.head.appendChild(script);
      })
  }

　　

　　　　②在vue組件導入剛剛寫的js文件

　　　　

import TMap from 'TMap'
...
...
　　onLoad: function() {
    　　　　　　TMap('yourkey').then(qq => {
                var map = new qq.maps.Map(document.getElementById("container"), {
                    // 地圖的中心地理坐標。
                    center: new qq.maps.LatLng(39.916527, 116.397128),
                    zoom: 8
                });

            })
        },

 效果：

 

 

然后就可以使用api了，后續再補充吧，騰訊的官方文檔還是很詳細的，但結合uniapp開發可能有點不熟悉，能開頭，后面的就比較簡單了。

此處只是H5的使用，小程序的使用還沒嘗試，但是在開發者程序里面是報錯的。