文章目录
前言
微信小程序中使用腾讯地图的个性化图层：
微信小程序官方文档中的 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。希望大佬指点