nuxt + 腾讯地图

腾讯地图api https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic

再nuxt项目中引入腾讯地图

• 在 nuxt.config.js中引入

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    script:[
      {src: "https://map.qq.com/api/gljs?v=1.exp&key=自己的腾讯地图key",  type: 'text/javascript', mode: 'client'},
    ]
  },
}

• 简单例子

//地图初始化函数，本例取名为init，开发者可根据实际情况定义
        function initMap() {
            //定义地图中心点坐标
            var center = new TMap.LatLng(39.984120, 116.307484)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            // *有个div的id为 container
            var map = new TMap.Map(document.getElementById('container'), {
                center: center,//设置地图中心点坐标
                zoom: 17.2,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });
        }