vue-cli 引入腾讯地图（最新 api）

末蓝、 2022-10-13 01:59 540阅读 0赞

### vue-cli 引入腾讯地图 ###

*  前言
 *  解决方案
 *   *  方案1：index.html 引入
     *  方案2：异步加载

# 前言 #

在 vue-cli 项目中一般要通过 npm 安装模块，然后再使用，但是腾讯地图没有官方模块，但是我们可以通过 `script` 标签引入，但问题是如何在 vue-cli 项目中利用 `script` 引入模块呢？

百度了很多方案，基本都是利用 npm 安装一个第三方模块 `qqmap`，但是这个是比较老的模块，许多腾讯地图的新 API 都不能用，因此我们要想办法引入最新的腾讯地图 API

# 解决方案 #

## 方案1：index.html 引入 ##

*  **可以在 public 文件下的 index.html 中通过 script 标签引入**

<!DOCTYPE html>
    <html lang="">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
      </head>
      
      <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你的key"></script>
      <body>
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        
      </body>
    </html>

在 index.html 页面引入后，在其他 .vue 页面可以通过 `window.TMap` 使用腾讯地图 api：

<template>
        <div id="container"></div>
    </template>
    
    <script>
        export default { 
            name: 'FarmMap',
            data () { 
                return { 
                map: null,
                }
            },
            mounted() { 
                this.initMap();
            },
            methods: { 
                initMap() { 
               	 	console.log(window); // 通过window获取
                    var center = new window.TMap.LatLng(39.984120, 116.307484)
                    //初始化地图
                    var map = new window.TMap.Map("container", { 
                        zoom: 18,//设置地图缩放级别
                        center: center,//设置地图中心点坐标
                        baseMap: {   // 设置卫星地图
                            type: 'satellite'
                        }
                    });
                    console.log(map);
                }
            }
        }
    </script>

## 方案2：异步加载 ##

参考官网的例子：[异步加载地图][Link 1]

[Link 1]: https://lbs.qq.com/webDemoCenter/glAPI/glMap/mapAsync