腾讯地图

基本使用

1: 新增 js 文件

/**
 * @param {String} AK - 腾讯地图key.
 */
export default {
  init: function () {
    const AK = "OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77";
    const TMap_URL =
      "https://map.qq.com/api/gljs?v=1.exp&libraries=tools,service&key=" +
      AK +
      "&callback=onMapCallback";
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (typeof TMap !== "undefined") {
        resolve(TMap);
        return true;
      }
      // 地图异步加载回调处理
      window.onMapCallback = function () {
        resolve(TMap);
      };

      // 插入script脚本
      let scriptNode = document.createElement("script");
      scriptNode.setAttribute("type", "text/javascript");
      scriptNode.setAttribute("src", TMap_URL);
      document.body.appendChild(scriptNode);
    });
  },
};

2: 页面使用

vue

<template>
  <div id="container"></div>
</template>
<script>
//第一步引入js文件
import TMap from "../../libs/map";
export default {
  name: "tencent-map",
  data() {
    return {
      TXMap: null,
      tMap: null,
    };
  },
  created() {
    //第二步,在合适的地方调用方法
    TMap.init().then((TMap) => {
      this.TXMap = TMap;
      this.tMap = new TMap.Map("container", {
        center: new TMap.LatLng(28.68868, 115.86453), //设置地图中心点坐标
        zoom: 15, //设置地图缩放级别
        viewMode: "3D", //3D或者2D
      });
    });
  },
};
</script>

腾讯地图 ​

基本使用 ​

​

​

​

腾讯地图

基本使用