vue使用腾讯地图

Question

vue里面使用腾讯地图，只能在index.html页面引入js吗？

我试了一下，在内页里面引入js没有效果。

有没有大神知道更好的办法？

Answer 1

可以简单封装个异步加载入口

const KEY = ''; // 填写你自己申请的key
let mapInit = false;
let mapLoad = false;
let callbacks = [];

function qqMap(libraries) {
  return new Promise(resolve => {
    if (!mapInit) {
      const script = document.createElement('script');
      const callbackName = 'onQQMapLoad';
      libraries = libraries || 'drawing,geometry,convertor';
      script.src = `//map.qq.com/api/js?v=2.exp&key=${KEY}&libraries=${libraries}&callback=${callbackName}`;
      window[callbackName] = () => {
        mapLoad = true;
        for (const callback of callbacks) {
          callback(window.qq);
        }
        callbacks = [];
      };
      document.body.appendChild(script);
      mapInit = true;
    } else if (mapLoad) {
      resolve(window.qq);
    } else {
      callbacks.push(resolve);
    }
  });
}

export default qqMap;

在组件中使用

<template>
  <div ref="map" style="width: 100%; height:500px;"></div>
</template>
<script>
  import qqMap from '@/utils/qq-map.js';
 
  export default {
    mounted() {
      qqMap().then(qq => {
        new qq.maps.Map(this.$refs.map, {
          zoom: 8,
          mapTypeId: qq.maps.MapTypeId.ROADMAP,
        });
      });
    },
  };
</script>

Answer 2

可以在组件动态引入js包；

参考网址：https://www.cnblogs.com/mrer/...

Answer 3

可以参考下这篇文章 https://segmentfault.com/a/11...
把腾讯地图写在子组件中，然后父组件调用