微信小程序+ vue3 + ts 中使用腾讯地图和个性化图层

文章目录

前言

1. 引入 js 文件（index.html）

2. 初始化地图和个性化图层的代码

二、Vue3 初始化地图 和 个性化图层

1. 引入 js 文件（index.html）

2.初始化地图和个性化图层的代码

总结

---

---

前言

微信小程序中使用腾讯地图的个性化图层：

微信小程序官方文档中的 API ：MapContext.addCustomLayer(Object object)，功能描述是添加个性化图层。图层创建参考文档

但是示例中并没有微信小程序的开发指南，只在最底部提示小程序的需要联系工单联系商务。查文档的时候找到一个可行的解决方案：通过微信小程序的 web-view ，内嵌网址

说明：最开始尝试是自己单独创建一个 html 文件，然后使用 node.js 创建一个极简服务器，web-view 中的 src 链接的本地服务器地址。试验可行后，将代码重新写到一个 vue2 的项目中，最后由于某些原因，又让改到一个 vue3 的项目里面，整个过程一波三折。

---

一、Vue2 初始化地图 和 个性化图层

1. 引入 js 文件（index.html）

 代码：Key 记得换成自己的

  <!--初始化地图-->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=TPOBZ-HESCX-2RI4F-THICV-M6TBO-QVFY4"></script>
  <!--定位-->
<script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
<script charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=TPOBZ-HESCX-2RI4F-THICV-M6TBO-QVFY4"></script>

2. 初始化地图和个性化图层的代码

<template>
  <div class="bigBox">
    <!-- map -->
    <div id="mapContainer"></div>
  </div>
</template>

  methods: {
    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap() {
      let ne = new window.TMap.LatLng(30.86686, 120.45138);
      let sw = new window.TMap.LatLng(30.86686, 120.42038);
      // 定义地图中心点坐标
      var center = new window.TMap.LatLng(30.878199, 120.430593);
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new window.TMap.Map(document.getElementById("mapContainer"), {
        center: center, // 设置地图中心点坐标
        zoom: 17,
        minZoom: 15,
        maxZoom: 18,
        showControl: false,
        viewMode: "2D",
        boundary: new window.TMap.LatLngBounds(ne, sw),
        baseMap: {
          //底图设置（参数为：VectorBaseMap对象）
          type: "vector", //类型：失量底图
          features: ["base", "building2d"],
          //仅渲染：道路及底面(base) + 2d建筑物(building2d)，以达到隐藏文字的效果
        },
      });
      console.log(map);
      console.log(window);
      window.TMap.ImageTileLayer.createCustomLayer({
        layerId: "你的图层ID",
        map: map,
      }).then((customLayer) => {
        if (customLayer) {
          // 成功创建个性化图层
          console.log("done");
        } else {
          // 创建失败，请查看控制台错误信息
          console.log("fail");
        }
      });
    },
  },

二、Vue3 初始化地图 和 个性化图层

1. 引入 js 文件（index.html）

  <!--初始化地图-->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=TPOBZ-HESCX-2RI4F-THICV-M6TBO-QVFY4"></script>
  <!--定位-->
<script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
<script charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=TPOBZ-HESCX-2RI4F-THICV-M6TBO-QVFY4"></script>

2.初始化地图和个性化图层的代码

<template>
  <div class="bigBox">
    <!-- 地图 -->
    <div ref="mapInfo" id="info" class="mapInfo"></div>
  </div>
</template>
// 记得别用TS，会提示 window 不存在 TMap
<script setup>
import { onMounted, ref } from 'vue'
onMounted(() => {
  initMap()
})
  //初始化地图
  const map = new window.TMap.Map(info, {
    zoom: 17,
    minZoom: 15,
    maxZoom: 18,
    showControl: false,
    viewMode: '2D',
    center: center, //设置地图中心点坐标
    boundary: new window.TMap.LatLngBounds(ne, sw),
    baseMap: {
      type: 'vector',
    },
  })
// 个性化图层
  window.TMap.ImageTileLayer.createCustomLayer({
    layerId: '你的图层ID',
    map: map,
  }).then(customLayer => {
    if (customLayer) {
      // 成功创建个性化图层
      console.log('done')
    } else {
      // 创建失败，请查看控制台错误信息
      console.log('fail')
    }
  })
</script>

---

总结

在 Vue3 遇到很多问题，最开始代码根本就挪不过来，各种报错。试过不使用 setup 的语法糖，试过网上找的很多方法，和用不用 setup 语法糖没啥关系，用不用都能实现，唯独很奇怪不能使用 TS，会提示 window 不存在 TMap。希望大佬指点