H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue使用腾讯地图

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

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

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

回答

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

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

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

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>

本文地址:H5W3 » vue使用腾讯地图

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址